diff --git a/docs/reference/src/language/builtins/elements.md b/docs/reference/src/language/builtins/elements.md index 531c85279e8c..48f9bdc7afc1 100644 --- a/docs/reference/src/language/builtins/elements.md +++ b/docs/reference/src/language/builtins/elements.md @@ -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. Do not have effect 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 { } ``` +Esample 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 diff --git a/docs/reference/src/language/syntax/types.md b/docs/reference/src/language/syntax/types.md index 5cf758ad2fbf..8a123908ac6b 100644 --- a/docs/reference/src/language/syntax/types.md +++ b/docs/reference/src/language/syntax/types.md @@ -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: