Types

All properties in Slint have a type. Slint knows these basic types:

Name	description	Default value
`angle`	Angle measurement, corresponds to a literal like `90deg`, `1.2rad`, `0 25turn`	`0deg`
`bool`	boolean whose value can be either `true` or `false`.	`false`
`brush`	A brush is a special type that can be either initialized from a `color` or a `gradient`. See Colors & Brushes.	`transparent`
`color`	RGB color with an alpha channel, with 8 bit precision for each channel. CSS color names as well as the hexadecimal color encodings are supported, such as #RRGGBBAA or #RGB. See Colors & Brushes.	`transparent`
`duration`	Type for the duration of animations. A suffix like `ms` (millisecond) or `s` (second) is used to indicate the precision.	`0ms`
`easing`	Property animation allow specifying an easing curve. See animations for list of values.	`linear`
`float`	Signed, 32-bit floating point number. Numbers with a `%` suffix are automatically divided by 100, so for example `30%` is the same as `0.30`.	`0`
`image`	A reference to an image, can be initialized with the `@image-url("...")` construct	empty image
`int`	Signed integral number.	`0`
`length`	The type used for `x`, `y`, `width` and `height` coordinates. Corresponds to a literal like `1px`, `1pt`, `1in`, `1mm`, or `1cm`. It can be converted to and from length provided the binding is run in a context where there is an access to the device pixel ratio.	`0px`
`percent`	Signed, 32-bit floating point number that is interpreted as percentage. Literal number assigned to properties of this type must have a `%` suffix.	`0%`
`physical-length`	This is an amount of physical pixels. To convert from an integer to a length unit, one can simply multiply by `1px`. Or to convert from a length to a float, one can divide by `1phx`.	`0phx`
`relative-font-size`	Relative font size factor that is multiplied with the `Window.default-font-size` and can be converted to a `length`.	0rem
`string`	UTF-8 encoded, reference counted string.	`""`

Please see the language specific API references how these types are mapped to the APIs of the different programming languages.

Images

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.

Slint looks for images in the following places:

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

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

export component Example inherits Window {
    preferred-width: 150px;
    preferred-height: 50px;

    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;
    }
}

slint

It is also possible to load images supporting 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

String

Any sequence of utf-8 encoded characters surrounded by quotes is a string: "foo".

Escape sequences may be embedded into strings to insert characters that would be hard to insert otherwise:

Escape	Result
`\"`	`"`
`\\`	`\`
`\n`	new line
`\u{x}`	where `x` is a hexadecimal number, expands to the unicode code point represented by this number
`\{expression}`	the result of evaluating the expression

Anything else following an unescaped \ is an error.

export component Example inherits Text {
    text: "hello";
}

slint

Structs

Define named structures using the struct keyword:

export struct Player  {
    name: string,
    score: int,
}

export component Example {
    in-out property<Player> player: { name: "Foo", score: 100 };
}

slint

The default value of a struct, is initialized with all its fields set to their default value.

Anonymous Structures

Declare anonymous structures using { identifier1: type1, identifier2: type2 } syntax, and initialize them using { identifier1: expression1, identifier2: expression2 }.

You may have a trailing , after the last expression or type.

export component Example {
    in-out property<{name: string, score: int}> player: { name: "Foo", score: 100 };
    in-out property<{a: int, }> foo: { a: 3 };
}

slint

Enums

Define an enumeration with the enum keyword:

export enum CardSuit { clubs, diamonds, hearts, spade }

export component Example {
    in-out property<CardSuit> card: spade;
    out property<bool> is-clubs: card == CardSuit.clubs;
}

slint

Enum values can be referenced by using the name of the enum and the name of the value separated by a dot. (eg: CardSuit.spade)

The name of the enum can be omitted in bindings of the type of that enum, or if the return value of a callback is of that enum.

The default value of each enum type is always the first value.

Arrays and Models

Arrays are declared by wrapping [ and ] square brackets around the type of the array elements.

Array literals as well as properties holding arrays act as models in for expressions.

export component Example {
    in-out property<[int]> list-of-int: [1,2,3];
    in-out property<[{a: int, b: string}]> list-of-structs: [{ a: 1, b: "hello" }, {a: 2, b: "world"}];
}

slint

Arrays define the following operations:

array.length: One can query the length of an array and model using the builtin .length property.
array[index]: The index operator retrieves individual elements of an array.

Out of bound access into an array will return default-constructed values.

export component Example {
    in-out property<[int]> list-of-int: [1,2,3];

    out property <int> list-len: list-of-int.length;
    out property <int> first-int: list-of-int[0];
}

slint