Overview

import { Palette, HorizontalBox } from "std-widgets.slint";

export component MyCustomWidget {
    in property <string> text <=> label.text;

    Rectangle {
        background: Palette.control-background;

        HorizontalBox {
            label := Text {
                color: Palette.control-foreground;
            }
        }
    }
}

slint

Slint provides a series of built-in widgets that can be imported from "std-widgets.slint".

The widget appearance depends on the selected style. See Selecting a Widget Style for details how to select the style. If no style is selected, native is the default. If native isn’t available, fluent is the default.

All widgets support all properties common to builtin elements.

Palette Properties

Use Palette to create custom widgets that match the colors of the selected style e.g. fluent, cupertino, material, or qt.

background

brush (out) default: a transparent brush

Defines the default background brush. Use this if none of the more specialized background brushes apply.

foreground

brush (out) default: a transparent brush

Defines the foreground brush that is used for content that is displayed on background brush.

alternate-background

brush (out) default: a transparent brush

Defines an alternate background brush that is used for example for text input controls or panels like a side bar.

alternate-foreground

brush (out) default: a transparent brush

Defines the foreground brush that is used for content that is displayed on alternate-background brush.

control-background

brush (out) default: a transparent brush

Defines the default background brush for controls, such as push buttons, combo boxes, etc.

control-foreground

brush (out) default: a transparent brush

Defines the foreground brush that is used for content that is displayed on control-background brush.

accent-background

brush (out) default: a transparent brush

Defines the background brush for highlighted controls such as primary buttons.

accent-foreground

brush (out) default: a transparent brush

Defines the foreground brush that is used for content that is displayed on accent-background brush.

selection-background

brush (out) default: a transparent brush

Defines the background brush that is used to highlight a selection such as a text selection.

selection-foreground

brush (out) default: a transparent brush

Defines the foreground brush that is used for content that is displayed on selection-background brush.

border

brush (out) default: a transparent brush

Defines the brush that is used for borders such as separators and widget borders.

color-scheme

enum ColorScheme (in-out) default: the first enum value

ColorScheme

This enum indicates the color scheme used by the widget style. Use this to explicitly switch between dark and light schemes, or choose Unknown to fall back to the system default.

• unknown: The scheme is not known and a system wide setting configures this. This could mean that the widgets are shown in a dark or light scheme, but it could also be a custom color scheme.
• dark: The style chooses light colors for the background and dark for the foreground.
• light: The style chooses dark colors for the background and light for the foreground.

Read this property to determine the color scheme used by the palette. Set this property to force a dark or light color scheme. All styles except for the Qt style support setting a dark or light color scheme.

StyleMetrics Properties

Use StyleMetrics to create custom widgets that match the layout settings of the selected style e.g. fluent, cupertino, material, or qt.

layout-spacing

length (out) default: 0px

Defines the default layout spacing. This spacing is also used by VerticalBox, HorizontalBox and GridBox.

layout-padding

length (out) default: 0px

Defines the default layout padding. This padding is also used by VerticalBox, HorizontalBox and GridBox.