language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-09-30 13:51:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Documentation for 9slice

Browse source
This commit is contained in:
Olivier Goffart 2024-02-09 18:42:58 +01:00
parent bb4f2b1581
commit 192ff07857
2 changed files with 21 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

19
docs/reference/src/language/builtins/elements.md
View file

@ -298,12 +298,13 @@ An `Image` can be used to represent an image loaded from a file.
- **`colorize`** (_in_ _brush_): When set, the image is used as an alpha mask and is drawn in the given color (or with the gradient).
- **`horizontal-alignment`** (_in_ _enum [`ImageHorizontalAlignment`](enums.md#imagehorizontalalignment)_): The horizontal alignment of the image within the element.
- **`image-fit`** (_in_ _enum [`ImageFit`](enums.md#imagefit)_): Specifies how the source image shall be fit into the image element. (default value: `contain` when the `Image` element is part of a layout, `fill` otherwise)
- **`image-fit`** (_in_ _enum [`ImageFit`](enums.md#imagefit)_): Specifies how the source image shall be fit into the image element. Does not have any effect when used with 9 slice scaling images.
(default value: `contain` when the `Image` element is part of a layout, `fill` otherwise)
- **`image-rendering`** (_in_ _enum [`ImageRendering`](enums.md#imagerendering)_): Specifies how the source image will be scaled. (default value: `smooth`)
- **`rotation-angle`** (_in_ _angle_), **`rotation-origin-x`** (_in_ _length_), **`rotation-origin-y`** (_in_ _length_):
Rotates the image by the given angle around the specified origin point. The default origin point is the center of the element.
When these properties are set, the `Image` can't have children.
- **`source`** (_in_ _image_): The image to load. Use the `@image-url("...")` macro to specify the location of the image.
- **`source`** (_in_ _image_): The image to load. Use the [`@image-url("...")` macro](../syntax/types#images) to specify the location of the image.
- **`source-clip-x`**, **`source-clip-y`**, **`source-clip-width`**, **`source-clip-height`** (_in_ _int_): Properties in source
image coordinates that define the region of the source image that is rendered. By default the entire source image is visible:
| Property | Default Binding |
@ -353,6 +354,20 @@ export component Example inherits Window {
}
```
Example using 9slice:
```slint
export component Example inherits Window {
width: 100px;
height: 150px;
VerticalLayout {
Image {
source: @image-url("https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png", 9slice(30));
}
}
}
```
## `Path`
The `Path` element allows rendering a generic shape, composed of different geometric commands. A path

4
docs/reference/src/language/syntax/types.md
View file

@ -174,6 +174,10 @@ export component Example inherits Window {
}
```
It is also possible to load images supporting [9 slice scaling](https://en.wikipedia.org/wiki/9-slice_scaling) (also called nine patch or border images)
by adding a `9slice(...)` argument. The argument can have either one, two, or four numbers that specifies the size of the edges.
The numbers are either `top right bottom left` or `vertical horizontal`, or one number for everything
## Structs
Define named structures using the `struct` keyword: