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

Merged
merged 6 commits into from
Feb 6, 2025
Merged

Fix incorrect visible: false docs #7415

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ab1c089
Fix incorrect visible: false docs
NigelBreslaw Jan 21, 2025
2bc222b
Fix opacity snippet
NigelBreslaw Jan 21, 2025
d1c6806
Clear up transparency
NigelBreslaw Jan 21, 2025
1e2fc9f
Better fix
NigelBreslaw Jan 21, 2025
7725275
Add in layer opacity example
NigelBreslaw Feb 6, 2025
6a88106
Make everyone happy
NigelBreslaw Feb 6, 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
204 changes: 178 additions & 26 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 @@ -42,46 +42,198 @@ The width and height of the element. When set, this overrides the default size.


### opacity
<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 propName="opacity" typeName="float" defaultValue="1">
A value between 0 and 1 (or a percentage) that is used to draw
the element and its children with transparency.
0 is fully transparent (invisible), and 1 is fully opaque.
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.
:::
</SlintProperty>
The following example demonstrates the opacity property with children. Note the software renderer does
not support layer opacity and this will result in a different end result as shown.

<CodeSnippetMD noScreenShot imagePath="/src/assets/generated/layer-opacity.png" imageWidth="150" imageHeight="390" imageAlt='layer opacity'>
```slint playground
Rectangle {
opacity: 50%;
Rectangle {
x: 0;
y: 0;
width: 100px;
height: 100px;
background: blue;
}

Rectangle {
x: 50px;
y: 50px;
width: 100px;
height: 100px;
background: green;
}
}
```
</CodeSnippetMD>

### 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;
<CodeSnippetMD skip="true" imagePath="/src/assets/generated/layer-opacity.png" scale="3" imageWidth="150" imageHeight="390" imageAlt='layer opacity'>
```slint playground
export component CheckerBoardRow inherits HorizontalLayout {
property <length> size: 15px;
property <int> columns: root.width / size;
in property <bool> isOdd: true;
property <int> isModOdd: isOdd ? 1 : 0;

height: size;
width: 200px;
for i in columns : Rectangle {
width: size;
height: size;
background: i.mod(2) == isModOdd ? #262626 : #2c2c2e;
}
}

Rectangle {
x: 10px;
y: 210px;
width: 180px;
height: 180px;
background: green;
opacity: 0.5;
export component CheckerBoard inherits VerticalLayout {
in property <length> size: 15px;
property <int> rows: root.height / size;

width: 200px;
height: 400px;
for i in rows : CheckerBoardRow {
isOdd: i.mod(2) != 0;

}
}
export component ExportedComponent2 inherits Window {
width: 150px;
height: 410px;
background: transparent;
CheckerBoard {
width: parent.width;
height: parent.height;
}

VerticalLayout {
spacing: 15px;
padding-top: 10px;
padding-bottom: 10px;

VerticalLayout {
spacing: 5px;
Rectangle {
width: 100px;
height: 150px;
opacity: 50%;
Rectangle {
x: 0;
y: 0;
width: 100px;
height: 100px;
background: blue;
}

Rectangle {
x: 50px;
y: 50px;
width: 100px;
height: 100px;
background: green;
}
}

Text {
text: "With Layer Opacity";
color: white;
horizontal-alignment: center;
}
}

VerticalLayout {
spacing: 5px;
Rectangle {
width: 100px;
height: 150px;
Rectangle {
x: 0;
y: 0;
width: 100px;
height: 100px;
background: blue;
opacity: 50%;
}

Rectangle {
x: 50px;
y: 50px;
width: 100px;
height: 100px;
background: green;
opacity: 50%;
}
}

Text {
text: "Without Layer Opacity\n(Software Renderer Only)";
color: white;
horizontal-alignment: center;
}
}
}
}
```
</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 element
will still take up layout space within any layout container.

</SlintProperty>

### absolute-position
Expand Down
Loading