Skip to content

Commit 608f665

Browse files
NigelBreslawNigelBreslaw
authored
Fix incorrect visible: false docs (#7415)
fixed: #7377
1 parent 4af1cd3 commit 608f665

File tree

1 file changed

+178
-26
lines changed

1 file changed

+178
-26
lines changed

‎docs/astro/src/content/docs/reference/common.mdx

+178-26
Original file line numberDiff line numberDiff line change
@@ -42,46 +42,198 @@ The width and height of the element. When set, this overrides the default size.
4242

4343

4444
### opacity
45+
<CodeSnippetMD imagePath="/src/assets/generated/rectangle-opacity.png" scale="3" imageWidth="100" imageHeight="310" imageAlt='rectangle opacity'>
46+
```slint playground
47+
component ImageInfo inherits Rectangle {
48+
in property <float> img-opacity: 1.0;
49+
background: transparent;
50+
VerticalLayout {
51+
spacing: 5px;
52+
Image {
53+
source: @image-url("elements/slint-logo.png");
54+
opacity: img-opacity;
55+
}
56+
Text {
57+
text: "opacity: " + img-opacity;
58+
color: white;
59+
horizontal-alignment: center;
60+
}
61+
}
62+
}
63+
export component Example inherits Window {
64+
width: 100px;
65+
height: 310px;
66+
background: transparent;
67+
Rectangle {
68+
background: #141414df;
69+
border-radius: 10px;
70+
}
71+
VerticalLayout {
72+
spacing: 15px;
73+
padding-top: 10px;
74+
padding-bottom: 10px;
75+
ImageInfo {
76+
img-opacity: 1.0;
77+
}
78+
ImageInfo {
79+
img-opacity: 0.6;
80+
}
81+
ImageInfo {
82+
img-opacity: 0.3;
83+
}
84+
}
85+
}
86+
```
87+
</CodeSnippetMD>
88+
4589
<SlintProperty propName="opacity" typeName="float" defaultValue="1">
4690
A value between 0 and 1 (or a percentage) that is used to draw
4791
the element and its children with transparency.
4892
0 is fully transparent (invisible), and 1 is fully opaque.
4993
The opacity is applied to the tree of child elements as if they
5094
were first drawn into an intermediate layer, and then the whole layer is rendered with this opacity.
5195

52-
:::tip[Tip]
53-
When an element has 0 opacity it will still take up layout space and any gesture handling will continue
54-
to work. If the intent is to hide an element so it has no gesture handling or no longer takes up layout space,
55-
use the `visible` property instead.
56-
:::
57-
</SlintProperty>
96+
The following example demonstrates the opacity property with children. Note the software renderer does
97+
not support layer opacity and this will result in a different end result as shown.
98+
99+
<CodeSnippetMD noScreenShot imagePath="/src/assets/generated/layer-opacity.png" imageWidth="150" imageHeight="390" imageAlt='layer opacity'>
100+
```slint playground
101+
Rectangle {
102+
opacity: 50%;
103+
Rectangle {
104+
x: 0;
105+
y: 0;
106+
width: 100px;
107+
height: 100px;
108+
background: blue;
109+
}
110+
111+
Rectangle {
112+
x: 50px;
113+
y: 50px;
114+
width: 100px;
115+
height: 100px;
116+
background: green;
117+
}
118+
}
119+
```
120+
</CodeSnippetMD>
58121

59-
### visible
60-
<SlintProperty propName="visible" typeName="bool" defaultValue="true">
61-
When set to `false`, the element and all his children won't be drawn and not react to mouse input.
62122

63-
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.
64-
<CodeSnippetMD imagePath="/src/assets/generated/rectangle-opacity.png" imageWidth="200" imageHeight="200" imageAlt='rectangle opacity'>
65-
```slint
66-
Rectangle {
67-
x: 10px;
68-
y: 10px;
69-
width: 180px;
70-
height: 180px;
71-
background: #315afd;
72-
opacity: 0.5;
123+
<CodeSnippetMD skip="true" imagePath="/src/assets/generated/layer-opacity.png" scale="3" imageWidth="150" imageHeight="390" imageAlt='layer opacity'>
124+
```slint playground
125+
export component CheckerBoardRow inherits HorizontalLayout {
126+
property <length> size: 15px;
127+
property <int> columns: root.width / size;
128+
in property <bool> isOdd: true;
129+
property <int> isModOdd: isOdd ? 1 : 0;
130+
131+
height: size;
132+
width: 200px;
133+
for i in columns : Rectangle {
134+
width: size;
135+
height: size;
136+
background: i.mod(2) == isModOdd ? #262626 : #2c2c2e;
137+
}
73138
}
74139
75-
Rectangle {
76-
x: 10px;
77-
y: 210px;
78-
width: 180px;
79-
height: 180px;
80-
background: green;
81-
opacity: 0.5;
140+
export component CheckerBoard inherits VerticalLayout {
141+
in property <length> size: 15px;
142+
property <int> rows: root.height / size;
143+
144+
width: 200px;
145+
height: 400px;
146+
for i in rows : CheckerBoardRow {
147+
isOdd: i.mod(2) != 0;
148+
149+
}
150+
}
151+
export component ExportedComponent2 inherits Window {
152+
width: 150px;
153+
height: 410px;
154+
background: transparent;
155+
CheckerBoard {
156+
width: parent.width;
157+
height: parent.height;
158+
}
159+
160+
VerticalLayout {
161+
spacing: 15px;
162+
padding-top: 10px;
163+
padding-bottom: 10px;
164+
165+
VerticalLayout {
166+
spacing: 5px;
167+
Rectangle {
168+
width: 100px;
169+
height: 150px;
170+
opacity: 50%;
171+
Rectangle {
172+
x: 0;
173+
y: 0;
174+
width: 100px;
175+
height: 100px;
176+
background: blue;
177+
}
178+
179+
Rectangle {
180+
x: 50px;
181+
y: 50px;
182+
width: 100px;
183+
height: 100px;
184+
background: green;
185+
}
186+
}
187+
188+
Text {
189+
text: "With Layer Opacity";
190+
color: white;
191+
horizontal-alignment: center;
192+
}
193+
}
194+
195+
VerticalLayout {
196+
spacing: 5px;
197+
Rectangle {
198+
width: 100px;
199+
height: 150px;
200+
Rectangle {
201+
x: 0;
202+
y: 0;
203+
width: 100px;
204+
height: 100px;
205+
background: blue;
206+
opacity: 50%;
207+
}
208+
209+
Rectangle {
210+
x: 50px;
211+
y: 50px;
212+
width: 100px;
213+
height: 100px;
214+
background: green;
215+
opacity: 50%;
216+
}
217+
}
218+
219+
Text {
220+
text: "Without Layer Opacity\n(Software Renderer Only)";
221+
color: white;
222+
horizontal-alignment: center;
223+
}
224+
}
225+
}
82226
}
83227
```
84228
</CodeSnippetMD>
229+
230+
</SlintProperty>
231+
232+
### visible
233+
<SlintProperty propName="visible" typeName="bool" defaultValue="true">
234+
When set to `false`, the element and all his children won't be drawn and not react to mouse input. The element
235+
will still take up layout space within any layout container.
236+
85237
</SlintProperty>
86238

87239
### absolute-position

0 commit comments

Comments
 (0)