Introduction

coop is a custom widget and component library for Slint.

Getting Started

If you want to start with coop and you are new to Slint you should check the Slint documentation.

To want to use coop with Rust you can check the documentation of the coop crate or you can start with the coop template.

Foundation

The foundation module contains different base components that can be used to create widgets in a custom design. The components can be imported using @coop/foundation.slint.

`CheckBoxStyle`

Defines the visual settings of a checkbox.

Fields

box_background (brush): Defines background of the check box. (default value: black)
box_background_checked (brush): Defines background of the check box if checked is true. (default value: black)
box_border_brush (brush): Defines the brush of the check box. (default value: black)
box_border_radius (length): The size of the radius of the check box. (default value: 0)
box_border_width (length): Defines the width of the border of the check box. (default value: 0)
box_icon_style (IconStyle): Defines the style of the check box icon.
text_style (TextStyle): Defines the style of the text. (default value: 0)
spacing (length): Defines the distance between elements in the checkbox layout. (default value: 0)

`CheckBoxBase`

The CheckBoxBase represents the base for checkbox elements that can be styled by usign CheckBoxStyle.

Properties

enabled (in bool): If set to false the checkbox is disabled.
checked (in-out bool): Whether the checkbox is checked or not (default: false).
style (in ButtonStyle): Defines the style of the checkbox.
box_icon_style (out IconStyle): Gets the style of the check box icon..
text_style (out TextStyle): Gets the style of the text of the checkbox.

Callbacks

toggled(/* checked */ bool): The checked value changed.

Example

import { CheckBoxBase } from "@coop/foundation.slint";

export component MyCheckBox inherits CheckBoxBase {
    width: 20px;
    height: 20px;
    
    style: {
        background: black,
        border_radius: 8px,
    };
}

export component Example inherits Window {
    width: 200px;
    height: 100px;

    MyCheckBox {
        toggled(checked) => {
            debug(checked);
        }
    }    
}

`IconStyle`

Defines the color and icon_size of an icon.

Fields

foreground (brush): Defines the color of the icon. (default value: black)
icon_size (length): Defines the height of the icon. (default value: 0)

`IconBase`

The IconBase represents the base for icon elements that can be styled by using IconStyle.

Properties

style (in IconStyle): Used to set color and height of the icon.
icon (in image): The image source of the icon.

Example

import { IconBase } from "@coop/foundation.slint";

export component MyIcon inherits IconBase {
    style: {
        foreground: black,
        icon_size: 12px,
    };
}

export component Example inherits Window {
    width: 200px;
    height: 100px;

    MyIcon {
        icon: @image-url("my-icon.svg");
    }    
}

`TextStyle`

Defines the color, font_weight and font_size of a text.

Fields

foreground (brush): Defines the color of the text. (default value: black)
font_size (length): Defines the font size of the text. (default value: 0)
font_weight (int): Defines the font weight of the text. (default value: 0)

`TextBase`

The TextBase represents the base for text elements that can be styled by usign TextStyle. It inhertis the Text element.

Properties

style (in TextStyle): Used to set color, font_weight and font_size of the text.
color (in brush): The color of the text. (default value: depends on the style)
font_family (in string): The name of the font family selected for rendering the text.
font_size (in length): The font size of the text.
font_weight (in int): The weight of the font. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.
font_italic (in bool): Whether or not the font face should be drawn italicized or not. (default value: false)
horizontal_alignment (in enum TextHorizontalAlignment): The horizontal alignment of the text.
letter_spacing (in length): The letter spacing allows changing the spacing between the glyphs. A positive value increases the spacing and a negative value decreases the distance. (default value: 0)
overflow (in enum TextOverflow): What happens when the text overflows (default value: clip).
text (in string): The text rendered.
vertical_alignment (in enum TextVerticalAlignment): The vertical alignment of the text.
wrap (in enum TextWrap): The way the text wraps (default value: no_wrap).
stroke (in brush): The brush used for the text outline (default value: transparent).
stroke_width (in length): The width of the text outline. If the width is zero, then a hairline stroke (1 physical pixel) will be rendered.
stroke_style (in enum TextStrokeStyle): The style/alignment of the text outline (default value: outside).

Example

import { TextBase } from "@coop/foundation.slint";

export component MyText inherits TextBase {
    style: {
        foreground: black,
        font_size: 12px,
        font_weight: 300
    };
}

export component Example inherits Window {
    width: 200px;
    height: 100px;

    MyText {
        text: "hello world";
    }    
}

`RangeStyle`

Defines the visual settings of a range based (maximum, minimum, value) widget.

Fields

bar_height (length): Defines the height of the background bar and the track bar. (default: 0)
border_radius (length): The size of the radius for background bar and track bar. (default value: 0)
background (brush): Defines the brush of the background. (default value: black)
track_background (brush): Defines the brush of the track background. (default value: black)
handle_background (brush): Defines the brush of a drag handle if available. (default value: black)
handle_size (length): Defines the width and height of a drag handle if available. (default value: 0)

`RangeBase`

The RangeBase represents the base for widgets based on a maximum, minimum and value like a ProgressBar or Slider.

Properties

value (in_out float): The value. Defaults to the minimum.
minimum (in_out float): The minimum value (default: 0).
maximum (in_out float): The maximum value (default 100).
progress (out float): Returns the value mapped between range of 0 to 1 (default 0).
range (out float): Returns the range (maximum - minimum).
style (in RangeStyle): Defines the style of the widget.

Example

import { RangeBase } from "@coop/foundation.slint";

export component ProgressBar inherits RangeBase {
    in property <string> text <=> text_label.text;

    min-width: 100px;
    height: 8px;
    
    style: {
        background: black,
        border_radius: 4px,
        track_background: blue,
        track_border_radius: 4px,
    };

    background_layer := Rectangle {
        width: 100%;
        height: 100%;
        background: root.style.background;
        border_radius: root.style.border_radius;
    }

    track := Rectangle {
        x: 0;
        y: 0;
        width: root.width * (root.value - root.minimum) / (root.maximum - root.minimum);
        height: 100%;
        background: root.style.track_background;
        border_radius: root.style.track_border_radius;
    }
}

export component Example inherits Window {
    width: 200px;
    height: 100px;

    ProgressBar {
      value: 50;
    }    
}

`ButtonStyle`

Defines the visual settings of a button.

Fields

background (brush): Defines the brush of the background. (default value: black)
border_brush (brush): Defines the brush of the border. (default value: black)
border_radius (length): The size of the radius. (default value: 0)
border_width (length): Defines the width of the border. (default value: 0)
icon_style (IconStyle): Defines the style of the icon.
text_style (TextStyle): Defines the style of the text. (default value: 0)
padding_left (length): Defines the padding on the left side of the button layout. (default value: 0)
padding_rigth (length): Defines the padding on the right side of the button layout. (default value: 0)
padding_top (length): Defines the padding on the top side of the button layout. (default value: 0)
padding_bottom (length): Defines the padding on the bottom side of the button layout. (default value: 0)
spacing (length): Defines the distance between elements in the button layout. (default value: 0)
alignment (LayoutAlignment): Defines the alignment of elements in the button layout. (default value: 0)

`ButtonBase`

The ButtonBase represents the base for button elements that can be styled by usign ButtonStyle.

Properties

enabled (in bool): If set to false the button is disabled.
has_hover (out bool): Button sets this to true when the mouse is over it.
has_focus (out bool): Button sets this to true when the area has keyboard focus.
pressed (out bool): Set to true by the button when the mouse is pressed over it.
enter_pressed (out bool): Set to true by the button when the area has focus and enter key is pressed.
style (in ButtonStyle): Defines the style of the button.
icon_style (out IconStyle): Gets the style of the icon of the button.
text_style (out TextStyle): Gets the style of the text of the button.
mouse_cursor (out MouseCursor): The mouse cursor type when the mouse is hovering the button.

Callbacks

clicked(): Invoked when clicked: A finger or the left mouse button is pressed, then released on this element.

Example

import { ButtonBase, TextBase } from "@coop/foundation.slint";

export component MyButton inherits ButtonBase {
    in property <string> text <=> text_label.text;

    width: 60px;
    height: 20px;
    
    style: {
        background: black,
        border_radius: 8px,
        text_style: {
            foreground: white,
            font_size: 12px,
            font_weight: 400,
        }
    };

    text_label := TextBase {
        style: root.text_style;
        vertical_alignment: center;
        horizontal_alignment: center;
    }
}

export component Example inherits Window {
    width: 200px;
    height: 100px;

    MyButton {
        text: "Click me";

        clicked => {
            debug("Button clicked");
        }
    }    
}

Use FocusTouchArea to control what happens when the region it covers is touched or interacted with using the mouse. The clicked callback is also emitted when the element has focus and enter is pressed.

Properties

enabled (in bool): If set to false the touch area is disabled.
has_hover (out bool): FocusTouchArea sets this to true when the mouse is over it.
has_focus (out bool): FocusTouchArea sets this to true when the area has keyboard focus.
pressed (out bool): Set to true by the FocusTouchArea when the mouse is pressed over it.
enter_pressed (out bool): Set to true by the FocusTouchArea when the area has focus and enter key is pressed.
mouse_cursor (out MouseCursor): The mouse cursor type when the mouse is hovering the FocusTouchArea.

Callbacks

clicked(): Invoked when clicked: A finger or the left mouse button is pressed, then released on this element.

Example

import { FocusTouchArea } from "@coop/foundation.slint";

export component Example inherits Window {
    width: 200px;
    height: 100px;
    
    touch-area := FocusTouchArea {
        width: parent.width;
        height: parent.height;
        
        clicked => {
            rect2.background = #ff0;
        }
    }
    
    Rectangle {
        x:0;
        width: parent.width / 2;
        height: parent.height;
        background: area.pressed ? blue: red;
    }
    
    rect2 := Rectangle {
        x: parent.width / 2;
        width: parent.width / 2;
        height: parent.height;
    }
}

Pure

The pure module contains the default widget set of coop. The widgets following the pure design language that is developed especially for coop. The components can be imported using @coop/pure.slint.

`CheckBox`

Use a CheckBox to let the user select or deselect values, for example in a list with multiple options. Consider using a Switch element instead if the action resembles more something that’s turned on or off.

Properties

text (in string): If set to false the checkbox is disabled.
enabled (in bool): If set to false the checkbox is disabled.
checked (in-out bool): Whether the checkbox is checked or not (default: false).
style (in ButtonStyle): Defines the style of the checkbox.
box_icon_style (out IconStyle): Gets the style of the check box icon..
text_style (out TextStyle): Gets the style of the text of the checkbox.

Callbacks

toggled(/* checked */ bool): The checked value changed.

Example

import { CheckBox } from "@coop/pure.slint";
export component Example inherits Window {
    width: 200px;
    height: 25px;
    
    CheckBox {
        text: "Hello World";
    }
}

`CircularProgressSlider`

The CircularProgressSlider can be used as progress bar and as slider with a circular shape.

Properties

value (in_out float): The value. Defaults to the minimum.
minimum (in_out float): The minimum value (default: 0).
maximum (in_out float): The maximum value (default 100).
progress (out float): Returns the value mapped between range of 0 to 1 (default 0).
range (out float): Returns the range (maximum - minimum).
style (in RangeStyle): Defines the style of the widget.
value (in_out float): The value. Defaults to the minimum.
indeterminate (in bool): Set to true if the progress of the operation cannot be determined by value (default value: false).
interactive (in bool): Set to true to display the widget as slider (default value: false).
enabled (in bool): If set to false the widget is disabled.
has_focus (out bool): Is true when the element has keyboard focus.
step_size (in float): The increment / decrement value on keyboard operations (default 1).

Callbacks

edited(/* value */ float): Invoked when value is changed by user interaction.

Example

import { CircularProgressSlider, VerticalBox } from "@coop/pure.slint";
export component Example inherits Window {
    VerticalBox {
        CircularProgressSlider {
          value: 50;
        }
    }
}

`IconButton`

A button with only an icon as content.

Properties

icon (in image): The image to show in the button.
enabled (in bool): If set to false the button is disabled.
has_hover (out bool): Button sets this to true when the mouse is over it.
has_focus (out bool): Button sets this to true when the area has keyboard focus.
pressed (out bool): Set to true by the button when the mouse is pressed over it.
enter_pressed (out bool): Set to true by the button when the area has focus and enter key is pressed.
style (in ButtonStyle): Defines the style of the button.
icon_style (out IconStyle): Gets the style of the icon of the button.
text_style (out TextStyle): Gets the style of the text of the button.

Callbacks

clicked(): Invoked when clicked: A finger or the left mouse button is pressed, then released on this element.

Example

import { IconButton, VerticalBox } from "@coop/pure.slint";
export component Example inherits Window {
    VerticalBox {
        IconButton {
            icon: @image-url("/path/to/my/icon.svg");
            clicked => { self.text = "Clicked"; }
        }
    }
}

`Icons`

Provides a subset of Material Icons.

Properties

add (out image): Add icon.
arrow_back (out image): Arrow back icon.
arrow_downward (out image): Arrow downward icon.
arrow_drop-down (out image): Arrow drop down icon.
arrow_forward (out image): Arrow forward.
arrow_upward (out image): Arrow upward.
arrow_right (out image): Arrow right.
book (out image): Book icon.
brush (out image): Brush icon.
calculate (out image): Calculate icon.
check (out image): Check icon.
clear (out image): Clear icon.
computer (out image): Computer icon.
description (out image): Description icon.
folder (out image): Folder icon.
format_size (out image): Format size icon.
home (out image): Home icon.
image (out image): Image icon.
insert_drive-file (out image): Insert drive file icon.
keyboard_return (out image): Keyboard return icon.
light_mode (out image): Light mode icon.
list (out image): List icon.
mode_night (out image): Mode night icon.
more_vert (out image): More vertical icon.
pin (out image): Pin icon.
reorder (out image): Reorder icon.
search (out image): Search icon.
videogame_asset (out image): Video game asset icon.
visibility_off (out image): Visibility off icon.
visibility (out image): Visibility icon.
menu (out image): Menu icon.
storage (out image): Storage icon.
filled_audio-file (out image): Filled audio file icon.
filled_av_timer (out image): Filled av timer icon.
filled_calendar_month (out image): Filled calendar month icon.
filled_description (out image): Filled description icon.
filled_folder (out image): Filled folder icon.
filled_image (out image): Filled image icon-
filled_insert_drive-file (out image): Filled insert drive file icon.
filled_settings (out image): Filled settings icon.
filled_video_file (out image): Filled video file icon.
filled_videogame_asset (out image): Filled video asset icon.

`PurePalette`

Use PurePalette to create custom widgets that matches the colors of the pure style.

Properties

background (out brush): fines the default background brush. Use this if none of the more specialised background brushes apply.
foreground (out brush): Defines the foreground brush that is used for content that is displayed on 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.
destructive_background (out brush): Defines the background brush for destructive controls such as destructive buttons.
destructive_foreground (out brush): Defines the foreground brush that is used for content that is displayed on accent-background brush.
border (out brush): Defines the brush that is used for borders such as separators and widget borders.
focus_border (out brush): Defines brush of focus borders.
state_pressed (out brush): Defines the brush of the state overlay if the widget is pressed.
state_hovered (out brush): Defines the brush of the state overlay if the widget is hovered by the mouse pointer.
dark_color_scheme (out brush): If color_scheme is set to dark it is true otherwise false.
color_scheme (out ColorScheme): Read this property to determine the color scheme used by the palette. Set this property to force a dark or light color scheme.

`PureFontSettings`

Use PureFontSettings to create custom widgets that matches the font settings of the pure style.

Properties

light_font_weight (out int): Defines the light font weight of the pure style.
regular_font_weight (out int): Defines the regular font weight of the pure style.
semi_bold_font_weight (out int): Defines the semi bold font weight of the pure style.
body (out TextStyle): Defines the body text style of pure.

`PureIconSettings`

Use PureIconSettings to create custom widgets that matches the icon settings of the pure style.

Properties

body (out IconStyle): Defines the body icon style of pure.

`PureAnimationSettings`

Use PureAnimationSettings to create animations for custom widgets that matches the animation settings of the pure style.

Properties

color_duration (out duration): Defines the animation duration for color animations.
resize_duration (out duration): Defines the animation duration of reszing of an element.

`PureSizeSettings`

Use PureSettingsSettings to define sizes of custom widgets that matches the settings of the pure style.

Properties

box_height (out length): Defines theheight of box elements like checkbox.
control_height (out length): Defines the default height of controls like buttons.

`PureSpaceSettings`

Use PureSpaceSettings to define padding and spcing of custom widgets that matches the settings of the pure style.

Properties

control_spacing (out length): Defines the default inner spacing of elements inside of a widget.
control_padding (out length): Defines the default padding of a widget.

`PureBorderSettings`

Use PureBorderSettings to define border setting of custom widgets that matches the pure style.

Properties

box_border_radius (out length): Defines the border radius of box elements like checkbox.
control_border_radius (out length): Defines the default border radius of elements inside of a widget.

`StateLayer`

The StateLayer can be used to create custom widget with a state indication like pressed or hovered. The state layer shoulb be placed between the background and the content of the widget.

Properties

border_radius (in length): Defines the size of the radius. (default value: 0)
pressed (in bool): Set to true to display the state layer in the pressed state. (default value: false)
has_hover (in bool): Set to true to display the state layer in the hovered state. (default value: false)
has_focus (in bool): Set to true to display the state layer in the focused state. (default value: false)

Example

import { StateLayer } from "@coop/pure.slint";

export component MyWidget inherits Rectangle {
    width: 60px;
    height: 20px;
    background: green;

    touch_area := TouchArea {}

    StateLayer {
        pressed: touch_area.pressed;
        has_hover: touch_area.has_hover;
    }
}

export component Example inherits Window {
    width: 200px;
    height: 100px;

    MyWidget {}    
}

`FilledButton`

A button with a filled shape that can be displayed also as primary or destructive button.

Properties

text (in string): The text written in the button.
icon (in image): The image to show in the button.
action (in ButtonAction): Defines if the button is displayed default, primary or destructive.
enabled (in bool): If set to false the button is disabled.
has_hover (out bool): Button sets this to true when the mouse is over it.
has_focus (out bool): Button sets this to true when the area has keyboard focus.
pressed (out bool): Set to true by the button when the mouse is pressed over it.
enter_pressed (out bool): Set to true by the button when the area has focus and enter key is pressed.
style (in ButtonStyle): Defines the style of the button.
icon_style (out IconStyle): Gets the style of the icon of the button.
text_style (out TextStyle): Gets the style of the text of the button.

Callbacks

clicked(): Invoked when clicked: A finger or the left mouse button is pressed, then released on this element.

Example

import { FilledButton, VerticalBox } from "@coop/pure.slint";
export component Example inherits Window {
    VerticalBox {
        FilledButton {
            text: "Click Me";
            clicked => { self.text = "Clicked"; }
        }
    }
}

`TextButton`

A button with no background and border.

Properties

text (in string): The text written in the button.
icon (in image): The image to show in the button.
enabled (in bool): If set to false the button is disabled.
has_hover (out bool): Button sets this to true when the mouse is over it.
has_focus (out bool): Button sets this to true when the area has keyboard focus.
pressed (out bool): Set to true by the button when the mouse is pressed over it.
enter_pressed (out bool): Set to true by the button when the area has focus and enter key is pressed.
style (in ButtonStyle): Defines the style of the button.
icon_style (out IconStyle): Gets the style of the icon of the button.
text_style (out TextStyle): Gets the style of the text of the button.

Callbacks

clicked(): Invoked when clicked: A finger or the left mouse button is pressed, then released on this element.

Example

import { TextButton, VerticalBox } from "@coop/pure.slint";
export component Example inherits Window {
    VerticalBox {
        TextButton {
            text: "Click Me";
            clicked => { self.text = "Clicked"; }
        }
    }
}

`OutlineButton`

A button with an outline border.

Properties

text (in string): The text written in the button.
icon (in image): The image to show in the button.
enabled (in bool): If set to false the button is disabled.
has_hover (out bool): Button sets this to true when the mouse is over it.
has_focus (out bool): Button sets this to true when the area has keyboard focus.
pressed (out bool): Set to true by the button when the mouse is pressed over it.
enter_pressed (out bool): Set to true by the button when the area has focus and enter key is pressed.
style (in ButtonStyle): Defines the style of the button.
icon_style (out IconStyle): Gets the style of the icon of the button.
text_style (out TextStyle): Gets the style of the text of the button.

Callbacks

clicked(): Invoked when clicked: A finger or the left mouse button is pressed, then released on this element.

Example

import { OutlineButton, VerticalBox } from "@coop/pure.slint";
export component Example inherits Window {
    VerticalBox {
        OutlineButton {
            text: "Click Me";
            clicked => { self.text = "Clicked"; }
        }
    }
}

`ProgressSlider`

The ProgressSlider can be used as progress bar and as slider.

Properties

value (in_out float): The value. Defaults to the minimum.
minimum (in_out float): The minimum value (default: 0).
maximum (in_out float): The maximum value (default 100).
progress (out float): Returns the value mapped between range of 0 to 1 (default 0).
range (out float): Returns the range (maximum - minimum).
style (in RangeStyle): Defines the style of the widget.
value (in_out float): The value. Defaults to the minimum.
indeterminate (in bool): Set to true if the progress of the operation cannot be determined by value (default value: false).
interactive (in bool): Set to true to display the widget as slider (default value: false).
enabled (in bool): If set to false the widget is disabled.
has_focus (out bool): Is true when the element has keyboard focus.
step_size (in float): The increment / decrement value on keyboard operations (default 1).

Callbacks

edited(/* value */ float): Invoked when value is changed by user interaction.

Example

import { ProgressSlider, VerticalBox } from "@coop/pure.slint";
export component Example inherits Window {
    VerticalBox {
        ProgressSlider {
          value: 50;
        }
    }
}

`ButtonAction`

The ButtonAction enum defines different variants of a button default, primary and destructive.

default: The button requires less attention from the user.
primary: Suggested action - highest level of attention.
destructive: Destructive action - highest level of attention.

`PureButtonBase`

The PureButtonBase represents the base for button elements that can be styled by usign ButtonStyle and matches the pure style.

Properties

enabled (in bool): If set to false the button is disabled.
has_hover (out bool): Button sets this to true when the mouse is over it.
has_focus (out bool): Button sets this to true when the area has keyboard focus.
pressed (out bool): Set to true by the button when the mouse is pressed over it.
enter_pressed (out bool): Set to true by the button when the area has focus and enter key is pressed.
style (in ButtonStyle): Defines the style of the button.
icon_style (out IconStyle): Gets the style of the icon of the button.
text_style (out TextStyle): Gets the style of the text of the button.
mouse_cursor (out MouseCursor): The mouse cursor type when the mouse is hovering the button.
prefered_min_width (in length): Defines the prefered min width.
prefered_min_height (in length): Defines the prefered min height.

Callbacks

clicked(): Invoked when clicked: A finger or the left mouse button is pressed, then released on this element.

Example

import { PureButtonBase, PureText } from "@coop/pure.slint";

export component MyButton inherits PureButtonBase {
    in property <string> text <=> text_label.text;

    width: 60px;
    height: 20px;
    
    style: {
        background: black,
        border_radius: 8px,
        text_style: {
            foreground: white,
            font_size: 12px,
            font_weight: 400,
        }
    };

    text_label := PureText {
        style: root.text_style;
        vertical_alignment: center;
        horizontal_alignment: center;
    }
}

export component Example inherits Window {
    width: 200px;
    height: 100px;

    MyButton {
        text: "Click me";

        clicked => {
            debug("Button clicked");
        }
    }    
}

`PureIcon`

The PureIcon represents an icon element that matches the settings of the pure style.

Properties

style (in IconStyle): Used to set color and height of the icon.
icon (in image): The image source of the icon.

Example

import { PureIcon } from "@coop/pure.slint";

export component Example inherits Window {
    width: 200px;
    height: 100px;

    PureIcon {
        icon: @image-url("my-icon.svg");
    }    
}

`PureProgressSliderBase`

The PureProgressSliderBase represents the base for widgets that can be used as progressbar and slider.

Properties

value (in_out float): The value. Defaults to the minimum.
minimum (in_out float): The minimum value (default: 0).
maximum (in_out float): The maximum value (default 100).
progress (out float): Returns the value mapped between range of 0 to 1 (default 0).
range (out float): Returns the range (maximum - minimum).
style (in RangeStyle): Defines the style of the widget.
value (in_out float): The value. Defaults to the minimum.
indeterminate (in bool): Set to true if the progress of the operation cannot be determined by value (default value: false).
interactive (in bool): Set to true to display the widget as slider (default value: false).
enabled (in bool): If set to false the widget is disabled.
has_focus (out bool): Is true when the element has keyboard focus.
step_size (in float): The increment / decrement value on keyboard operations (default 1).

Callbacks

edited(/* value */ float): Invoked when value is changed by user interaction.

`PureText`

The PureText represents the base for text element that matches the pure style.

Properties

style (in TextStyle): Used to set color, font_weight and font_size of the text.
color (in brush): The color of the text. (default value: depends on the style)
font_family (in string): The name of the font family selected for rendering the text.
font_size (in length): The font size of the text.
font_weight (in int): The weight of the font. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.
font_italic (in bool): Whether or not the font face should be drawn italicized or not. (default value: false)
horizontal_alignment (in enum TextHorizontalAlignment): The horizontal alignment of the text.
letter_spacing (in length): The letter spacing allows changing the spacing between the glyphs. A positive value increases the spacing and a negative value decreases the distance. (default value: 0)
overflow (in enum TextOverflow): What happens when the text overflows (default value: clip).
text (in string): The text rendered.
vertical_alignment (in enum TextVerticalAlignment): The vertical alignment of the text.
wrap (in enum TextWrap): The way the text wraps (default value: no_wrap).
stroke (in brush): The brush used for the text outline (default value: transparent).
stroke_width (in length): The width of the text outline. If the width is zero, then a hairline stroke (1 physical pixel) will be rendered.
stroke_style (in enum TextStrokeStyle): The style/alignment of the text outline (default value: outside).

Example

import { PureText } from "@coop/pure.slint";

export component Example inherits Window {
    width: 200px;
    height: 100px;

    PureText {
        text: "pure text";
    }    
}

`VerticalBox`

It's just a VerticalLayout with predefined padding and spacing.

`HorizontalBox`

It's just a HorizontalLayout with predefined padding and spacing.

coop 0.1 reference