Reference Overview

The Slint elements have many common properties, callbacks and behavior. This page describes these properties and their usage.

`init()`

Every element implicitly declares an init callback. You can assign a code block to it that will be invoked when the element is instantiated and after all properties are initialized with the value of their final binding. The order of invocation is from inside to outside. The following example will print “first”, then “second”, and then “third”:

component MyButton inherits Rectangle {
    in-out property <string> text: "Initial";
    init => {
        // If `text` is queried here, it will have the value "Hello".
        debug("first");
    }
}

component MyCheckBox inherits Rectangle {
    init => { debug("second"); }
}

export component MyWindow inherits Window {
    MyButton {
        text: "Hello";
        init => { debug("third"); }
    }
    MyCheckBox {
    }
}

slint

Don’t use this callback to initialize properties, because this violates the declarative principle.

Even though the init callback exists on all components, it cannot be set from application code, i.e. an on_init function does not exist in the generated code. This is because the callback is invoked during the creation of the component, before you could call on_init to actually set it.

While the init callback can invoke other callbacks, e.g. one defined in a global section, and you can bind these in the backend, this doesn’t work for statically-created components, including the window itself, because you need an instance to set the globals binding. But it is possible to use this for dynamically created components (for example ones behind an if):

export global SystemService  {
    // This callback can be implemented in native code using the Slint API
    callback ensure_service_running();
}

component MySystemButton inherits Rectangle {
    init => {
        SystemService.ensure_service_running();
    }
    // ...
}

export component AppWindow inherits Window {
    in property <bool> show-button: false;

    // MySystemButton isn't initialized at first, only when show-button is set to true.
    // At that point, its init callback will call ensure_service_running()
    if show-button : MySystemButton {}
}

slint

Geometry

These properties are valid on all visible items:

x

length default: 0px

The position of the element relative to its parent.

y

length default: 0px

The position of the element relative to its parent.

z

float default: 0.0

Allows to specify a different order to stack the items with its siblings. The value must be a compile time constant.

absolute-position

struct Point default: a struct with all default values

Point

This structure represents a point with x and y coordinate

x (length):
y (length):

The position of the element within the contained window.

width

length default: 0px

The width of the element. When set, this overrides the default width.

height

length default: 0px

The height of the element. When set, this overrides the default height.

opacity

float default: 1

A value between 0 and 1 (or a percentage) that is used to draw the element and its children with transparency. 0 is fully transparent (invisible), and 1 is fully opaque. The opacity is applied to the tree of child elements as if they were first drawn into an intermediate layer, and then the whole layer is rendered with this opacity.

visible

bool default: true

When set to false, the element and all his children won’t be drawn and not react to mouse input.

The following example demonstrates the opacity property with children. An opacity is applied to the red rectangle. Since the green rectangle is a child of the red one, you can see the gradient underneath it, but you can’t see the red rectangle through the green one.

Rectangle {
    x: 10px;
    y: 10px;
    width: 180px;
    height: 180px;
    background: #315afd;
    opacity: 0.5;
}

Rectangle {
    x: 10px;
    y: 210px;
    width: 180px;
    height: 180px;
    background: green;
    opacity: 0.5;
}

slint

Layout

These properties are valid on all visible items and can be used to specify constraints when used in layouts:

col, row, colspan, rowspan (in int): See GridLayout.
horizontal-stretch and vertical-stretch (in-out float): Specify how much relative space these elements are stretching in a layout. When 0, this means that the elements won’t be stretched unless all elements are 0. Builtin widgets have a value of either 0 or 1.
max-width and max-height (in length): The maximum size of an element
min-width and min-height (in length): The minimum size of an element
preferred-width and preferred-height (in length): The preferred size of an element

Miscellaneous

cache-rendering-hint (in bool): When set to true, this provides a hint to the renderer to cache the contents of the element and all the children into an intermediate cached layer. For complex sub-trees that rarely change this may speed up the rendering, at the expense of increased memory consumption. Not all rendering backends support this, so this is merely a hint. (default value: false)
dialog-button-role (in enum DialogButtonRole): Specify that this is a button in a Dialog.

Accessibility

Use the following accessible- properties to make your items interact well with software like screen readers, braille terminals and other software to make your application accessible. accessible-role must be set in order to be able to set any other accessible property or callback.

accessible-role (in enum AccessibleRole): The role of the element. This property is mandatory to be able to use any other accessible properties. It should be set to a constant value. (default value: none for most elements, but text for the Text element)
accessible-checkable (in bool): Whether the element is can be checked or not.
accessible-checked (in bool): Whether the element is checked or not. This maps to the “checked” state of checkboxes, radio buttons, and other widgets.
accessible-description (in string): The description for the current element.
accessible-enabled (in bool): Whether the element is enabled or not. This maps to the “enabled” state of most widgets. (default value: true)
accessible-label (in string): The label for an interactive element. (default value: empty for most elements, or the value of the text property for Text elements)
accessible-value-maximum (in float): The maximum value of the item. This is used for example by spin boxes.
accessible-value-minimum (in float): The minimum value of the item.
accessible-value-step (in float) The smallest increment or decrement by which the current value can change. This corresponds to the step by which a handle on a slider can be dragged.
accessible-value (in string): The current value of the item.
accessible-placeholder-text (in string): A placeholder text to use when the item’s value is empty. Applies to text elements.
accessible-selectable (in bool): Whether the element can be selected or not.
accessible-selected (in bool): Whether the element is selected or not. This maps to the “is-selected” state of listview items.
accessible-position-in-set (in int): The index (starting from 0) of this element in a group of similar elements. Applies to list items, radio buttons and other elements.
accessible-size-of-set (in int): The total number of elements in a group. Applies to all elements of a group like list items, radio buttons and other elements, but not to their parent container like list views, radio button groups or other grouping elements.

You can also use the following callbacks that are going to be called by the accessibility framework:

accessible-action-default(): Invoked when the default action for this widget is requested (eg: pressed for a button).
accessible-action-set-value(string): Invoked when the user wants to change the accessible value.
accessible-action-increment(): Invoked when the user requests to increment the value.
accessible-action-decrement(): Invoked when the user requests to decrement the value.