Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix incorrect visible: false docs #7415

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+46 −28
Open

Fix incorrect visible: false docs #7415

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6fec788
Fix incorrect visible: false docs
NigelBreslaw Jan 21, 2025
00ec1d7
Fix opacity snippet
NigelBreslaw Jan 21, 2025
7ef2d2e
Clear up transparency
NigelBreslaw Jan 21, 2025
ea1caad
Better fix
NigelBreslaw Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 46 additions & 28 deletions docs/astro/src/content/docs/reference/common.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,39 +49,57 @@ the element and its children with transparency.
The opacity is applied to the tree of child elements as if they
were first drawn into an intermediate layer, and then the whole layer is rendered with this opacity.

:::tip[Tip]
When an element has 0 opacity it will still take up layout space and any gesture handling will continue
to work. If the intent is to hide an element so it has no gesture handling or no longer takes up layout space,
use the `visible` property instead.
:::
<CodeSnippetMD imagePath="/src/assets/generated/rectangle-opacity.png" scale="3" imageWidth="100" imageHeight="310" imageAlt='rectangle opacity'>
```slint playground
component ImageInfo inherits Rectangle {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This example is fine. But it deosn't explain the layer approach.
Which mean that for example, if the Rectangle itself has an opacity, both we can see through both the image and the text, but we can't see the image through the text.

See the Qt documentation as a better explaination for what i'm trying to explain: https://doc.qt.io/qt-6/qml-qtquick-item.html#item-layers

We pretend to operate with a "Layered Opacity"

Unless we are using the software renderer, in which case this is currently implemented with a "Non-layered Opacity" which i consider a defect of the software renderer, but i don't know if we can/want to fix that without paying a price of quite a lot of memory

in property <float> img-opacity: 1.0;
background: transparent;
VerticalLayout {
spacing: 5px;
Image {
source: @image-url("elements/slint-logo.png");
opacity: img-opacity;
}
Text {
text: "opacity: " + img-opacity;
color: white;
horizontal-alignment: center;
}
}
}
export component Example inherits Window {
width: 100px;
height: 310px;
background: transparent;
Rectangle {
background: #141414df;
border-radius: 10px;
}
VerticalLayout {
spacing: 15px;
padding-top: 10px;
padding-bottom: 10px;
ImageInfo {
img-opacity: 1.0;
}
ImageInfo {
img-opacity: 0.6;
}
ImageInfo {
img-opacity: 0.3;
}
}
}
```
</CodeSnippetMD>

</SlintProperty>

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

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'>
```slint
Rectangle {
x: 10px;
y: 10px;
width: 180px;
height: 180px;
background: #315afd;
opacity: 0.5;
}
When set to `false`, the element and all his children won't be drawn and not react to mouse input. The element
will still take up layout space within any layout container.

Rectangle {
x: 10px;
y: 210px;
width: 180px;
height: 180px;
background: green;
opacity: 0.5;
}
```
</CodeSnippetMD>
</SlintProperty>

### absolute-position
Expand Down
Loading