Types

Slint is a statically typed language and offers a rich range of primitive types.

Primitive Types

bool

bool default: false

boolean whose value can be either true or false.

string

string default: ""

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

Numeric Types

angle

angle default: 0deg

Angle measurement, corresponds to a literal like 90deg, 1.2rad, 0 25turn

duration

duration default: 0ms

Type for the duration of animations. A suffix like ms (millisecond) or s (second) is used to indicate the precision.

float

float default: 0

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.

int

int default: 0

Signed integral number.

length

length default: 0px

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.

percent

percent default: 0%

Signed, 32-bit floating point number that is interpreted as percentage. Literal number assigned to properties of this type must have a % suffix.

physical-length

physical-length default: 0phx

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.

relative-font-size

relative-font-size default: 0rem

Relative font size factor that is multiplied with the Window.default-font-size and can be converted to a length.

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

Color and Brush Types

brush

brush default: transparent

A brush is a special type that can be either initialized from a color or a gradient. See Colors & Brushes.

color

color default: transparent

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.

Images

image

image default: 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.

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

Animation

easing

easing default: linear

Property animation allow specifying an easing curve. easing: can be any of the following. See easings.net ↗ for a visual reference:

linear
ease-in-quad
ease-out-quad
ease-in-out-quad
ease
ease-in
ease-out
ease-in-out
ease-in-quart
ease-out-quart
ease-in-out-quart
ease-in-quint
ease-out-quint
ease-in-out-quint
ease-in-expo
ease-out-expo
ease-in-out-expo
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-back
ease-out-back
ease-in-out-back
ease-in-circ
ease-out-circ
ease-in-out-circ
ease-in-elastic
ease-out-elastic
ease-in-out-elastic
ease-in-bounce
ease-out-bounce
ease-in-out-bounce
cubic-bezier(a, b, c, d) as in CSS

Type Conversions

Slint supports conversions between different types. Explicit conversions are required to make the UI description more robust, but implicit conversions are allowed between some types for convenience.

The following conversions are possible:

int can be converted implicitly to float and vice-versa. When converting from float to int, the value is truncated.
int and float can be converted implicitly to string
physical-length, relative-font-size, and length can be converted implicitly to each other only in context where the pixel ratio is known.
the units type (length, physical-length, duration, …) can’t be converted to numbers (float or int) but they can be divided by themselves to result in a number. Similarly, a number can be multiplied by one of these unit. The idea is that one would multiply by 1px or divide by 1px to do such conversions
The literal 0 can be converted to any of these types that have associated unit.
Struct types convert with another struct type if they have the same property names and their types can be converted. The source struct can have either missing properties, or extra properties. But not both.
Arrays generally don’t convert between each other. Array literals can be converted if the element types are convertible.
String can be converted to float by using the to-float function. That function returns 0 if the string isn’t a valid number. You can check with is-float() if the string contains a valid number

export component Example {
    // OK: int converts to string
    property<{a: string, b: int}> prop1: {a: 12, b: 12 };
    // OK: even if a is missing, it will just have the default value ("")
    property<{a: string, b: int}> prop2: { b: 12 };
    // OK: even if c is too many, it will be discarded
    property<{a: string, b: int}> prop3: { a: "x", b: 12, c: 42 };
    // ERROR: b is missing and c is extra, this doesn't compile, because it could be a typo.
    // property<{a: string, b: int}> prop4: { a: "x", c: 42 };

    property<string> xxx: "42.1";
    property<float> xxx1: xxx.to-float(); // 42.1
    property<bool> xxx2: xxx.is-float(); // true
    property<int> xxx3: 45.8; // 45
}

slint