Skip to content

Commit

Permalink
Docs: Explain a bit more the image type with more examples
Browse files Browse the repository at this point in the history
  • Loading branch information
ogoffart committed Dec 21, 2024
1 parent abace80 commit 161d357
Showing 1 changed file with 29 additions and 3 deletions.
32 changes: 29 additions & 3 deletions docs/astro/src/content/docs/reference/primitive-types.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -106,31 +106,57 @@ RGB color with an alpha channel, with 8 bit precision for each channel. CSS colo
<SlintProperty propName="image" typeName="image" defaultValue='empty image'>

The `image` type is a reference to an image. It's defined using the `@image-url("...")` construct.
The address within the `@image-url` function must be known at compile time.
The address within the `@image-url` function must be a string literal and the image is resolved at compile time.

Slint looks for images in the following places:

1. The absolute path or the path relative to the current `.slint` file.
2. The include path used by the compiler to look up `.slint` files.

Loading image from `http` is only supported in [SlintPad](https://slintpad.com)

Access an `image`'s dimension using its `width` and `height` properties.

```slint
export component Example inherits Window {
preferred-width: 150px;
preferred-height: 50px;
// Note: http URL only work on the web version.
in property <image> some_image: @image-url("https://slint.dev/logo/slint-logo-full-light.svg");
Text {
text: "The image is " + some_image.width + "x" + some_image.height;
HorizontalLayout {
Text {
text: "The image is " + some_image.width + "x" + some_image.height;
}
// Check the size to find out if the image is empty.
if some_image.width > 0 : Image {
source: some_image
}
}
}
```

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 `nine-slice(...)` 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

```slint
// nine-slice scaling
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", nine-slice(30 30 30 30));
}
}
}
```

See also the <Link type="Image" label="Image element"/>.

</SlintProperty>

## Animation
Expand Down

0 comments on commit 161d357

Please sign in to comment.