slint/docs/widgets.md

Widgets

Widgets are not imported by default, and need to be imported from "sixtyfps_widgets.60"

Their appearence can change depending on the style

Button

Properties

• text (string): The text written in the button.
• pressed: (bool): Set to true when the button is pressed.

Signals

• clicked

Example

import { Button } from "sixtyfps_widgets.60";
Example := Window {
    width: 100px;
    height: 25px;
    Button {
        width: parent.width;
        height: parent.height;
        text: "Click Me";
        clicked => { self.text = "Clicked"; }
    }
}

CheckBox

Properties

• text (string): The text written next to the checkbox.
• checked: (bool): Whether the checkbox is checked or not.

Signals

• toggled: The checkbox value changed

Example

import { CheckBox } from "sixtyfps_widgets.60";
Example := Window {
    width: 200px;
    height: 25px;
    CheckBox {
        width: parent.width;
        height: parent.height;
        text: "Hello World";
    }
}

SpinBox

Properties

• value (int): The value.

Example

import { SpinBox } from "sixtyfps_widgets.60";
Example := Window {
    width: 200px;
    height: 25px;
    SpinBox {
        width: parent.width;
        height: parent.height;
        value: 42;
    }
}

Slider

Properties

• value (float): The value.
• min (float): The minimum value (default: 0)
• max (float): The maximum value (default: 100)

Example

import { Slider } from "sixtyfps_widgets.60";
Example := Window {
    width: 200px;
    height: 25px;
    Slider {
        width: parent.width;
        height: parent.height;
        value: 42;
    }
}

GroupBox

Properties

• title (string): A text written as the title of the group box.

Example

import { GroupBox } from "sixtyfps_widgets.60";
Example := Window {
    width: 200px;
    height: 100px;
    GroupBox {
        title: "A Nice Title";
        Text {
            text: "Hello World";
            color: blue;
        }
    }
}

LineEdit

Properties

• text (string): The test being edited
• has_focus: (bool): Set to true when the line edit currently has the focus

Signals

• accepted: Enter was pressed

Example

import { LineEdit } from "sixtyfps_widgets.60";
Example := Window {
    width: 200px;
    height: 25px;
    LineEdit {
        width: parent.width;
        height: parent.height;
        value: 42;
    }
}

ScrollView

A Scrollview contains a viewport that is bigger than the view and can be scrolled. It has scrollbar to interact with.

Properties

• viewport_width and viewport_height (lenght): The width and lenght properties of the viewport
• viewport_x and viewport_y (lenght): The x and y properties of the viewport. Usually these are negative
• visible_width and visible_height (lenght): The size of the visible area of the ScrollView (not including the scrollbar)

Example

import { ScrollView } from "sixtyfps_widgets.60";
Example := Window {
    width: 200px;
    height: 200px;
    ScrollView {
        width: 200px;
        height: 200px;
        viewport_width: 300px;
        viewport_height: 300px;
        Rectangle { width: 30px; height: 30px; x: 275px; y: 50px; color: blue; }
        Rectangle { width: 30px; height: 30px; x: 175px; y: 130px; color: red; }
        Rectangle { width: 30px; height: 30px; x: 25px; y: 210px; color: yellow; }
        Rectangle { width: 30px; height: 30px; x: 98px; y: 55px; color: orange; }
    }
}

ListView

A ListView is like a Scrollview but it should have a for element, and the content are automatically layed out in a list. Elements are only instentiated if they are visible

Properties

Same as ScrollView

Example

import { ListView } from "sixtyfps_widgets.60";
Example := Window {
    width: 150px;
    height: 150px;
    ListView {
        width: 150px;
        height: 150px;
        for data in [
            { text: "Blue", color: #0000ff, bg: #eeeeee},
            { text: "Red", color: #ff0000, bg: #eeeeee},
            { text: "Green", color: #00ff00, bg: #eeeeee},
            { text: "Yellow", color: #ffff00, bg: #222222 },
            { text: "Black", color: #000000, bg: #eeeeee },
            { text: "White", color: #ffffff, bg: #222222 },
            { text: "Magenta", color: #ff00ff, bg: #eeeeee },
            { text: "Cyan", color: #00ffff, bg: #222222 },
        ] : Rectangle {
            height: 30px;
            color: data.bg;
            width: parent.width;
            Text {
                text: data.text;
                color: data.color;
            }
        }
    }
}

StandardListView

Like ListView, but with a default delegate, and a model property which is a model of type StandardListViewItem

The StandardListViewItem is equivalent to { text: string } but will be improved in the future with icon, checked and so on (TODO)

Properties

Same as ListView, and in addition:

• model ([StandardListViewItem]): The model
• current_item (int): The index of the currently active item. -1 mean none is selected, which is the default

Example

import { StandardListView } from "sixtyfps_widgets.60";
Example := Window {
    width: 150px;
    height: 150px;
    StandardListView {
        width: 150px;
        height: 150px;
        model: [ { text: "Blue"}, { text: "Red" }, { text: "Green" },
            { text: "Yellow" }, { text: "Black"}, { text: "White"},
            { text: "Magenta" }, { text: "Cyan" },
        ];
    }
}