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 3

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). - **`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. - **`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`) - **`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_): - **`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. 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. 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 - **`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: image coordinates that define the region of the source image that is rendered. By default the entire source image is visible:
| Property | Default Binding | | 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` ## `Path`
The `Path` element allows rendering a generic shape, composed of different geometric commands. A 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 ## Structs
Define named structures using the `struct` keyword: Define named structures using the `struct` keyword: