Fix opacity snippet

slint-ui · Jan 21, 2025 · 00ec1d7 · 00ec1d7
1 parent 6fec788
commit 00ec1d7
Showing 1 changed file with 19 additions and 17 deletions.
diff --git a/docs/astro/src/content/docs/reference/common.mdx b/docs/astro/src/content/docs/reference/common.mdx
@@ -58,24 +58,26 @@ When set to `false`, the element and all his children won't be drawn and not rea
 will still take up layout space within any layout container.
 
 The following example demonstrates the `opacity` property with children. An opacity is applied to the red rectangle. Since the green rectangle is a child of the red one, you can see the gradient underneath it, but you can't see the red rectangle through the green one.
-<CodeSnippetMD imagePath="/src/assets/generated/rectangle-opacity.png"  imageWidth="200" imageHeight="200"  imageAlt='rectangle opacity'>
+<CodeSnippetMD imagePath="/src/assets/generated/rectangle-opacity.png" scale="3" imageWidth="100" imageHeight="100"  imageAlt='rectangle opacity'>
 ```slint
-Rectangle {
-    x: 10px;
-    y: 10px;
-    width: 180px;
-    height: 180px;
-    background: #315afd;
-    opacity: 0.5;
-}
-
-Rectangle {
-    x: 10px;
-    y: 210px;
-    width: 180px;
-    height: 180px;
-    background: green;
-    opacity: 0.5;
+export component Example inherits Window {
+    width: 100px;
+    height: 100px;
+    Rectangle {
+        opacity: 0.5;
+        background: red;
+        border-color: #822;
+        border-width: 5px;
+        width: 50px; height: 50px;
+        x: 10px; y: 10px;
+        Rectangle {
+            background: green;
+            border-color: #050;
+            border-width: 5px;
+            width: 50px; height: 50px;
+            x: 25px; y: 25px;
+        }
+    }
 }
 ```
 </CodeSnippetMD>