Documentation for 9slice

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

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: