Skip to content

Builtin Globals

Palette

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

Properties

  • background (out brush): Defines the default background brush. Use this if none of the more specialized background brushes apply.
  • foreground (out brush): Defines the foreground brush that is used for content that is displayed on background brush.
  • alternate-background (out brush): Defines an alternate background brush that is used for example for text input controls or panels like a side bar.
  • alternate-foreground (out brush): Defines the foreground brush that is used for content that is displayed on alternate-background brush.
  • control-background (out brush): Defines the default background brush for controls, such as push buttons, combo boxes, etc.
  • control-foreground (out brush): Defines the foreground brush that is used for content that is displayed on control-background brush.
  • accent-background (out brush): Defines the background brush for highlighted controls such as primary buttons.
  • accent-foreground (out brush): Defines the foreground brush that is used for content that is displayed on accent-background brush.
  • selection-background (out brush): Defines the background brush that is used to highlight a selection such as a text selection.
  • selection-foreground (out brush): Defines the foreground brush that is used for content that is displayed on selection-background brush.
  • border (out brush): Defines the brush that is used for borders such as separators and widget borders.
  • color-scheme (in out enum ColorScheme): 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.

Example

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

LayoutSpec

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

Properties

  • layout-spacing (out length): Defines the default layout spacing. This spacing is also used by VerticalBox, HorizontalBox and GridBox.
  • layout-padding (out length): Defines the default layout padding. This padding is also used by VerticalBox, HorizontalBox and GridBox.

TextInputInterface

The TextInputInterface.text-input-focused property can be used to find out if a TextInput element has the focus. If you’re implementing your own virtual keyboard, this property is an indicator whether the virtual keyboard should be shown or hidden.

Properties

  • text-input-focused (bool): True if an TextInput element has the focus; false otherwise.

Example

import { LineEdit } from "std-widgets.slint";


component VKB {
    Rectangle { background: yellow; }
}


export component Example inherits Window {
    width: 200px;
    height: 100px;
    VerticalLayout {
        LineEdit {}
        FocusScope {}
        if TextInputInterface.text-input-focused: VKB {}
    }
}