Introduction

vivi is a component library for Slint.

vivi provides currently the following two sets of components:

foundation: Base components that can be used to create a custom component set.
magic: Ready to use component set with a custom design based on Catppuccin.

Getting Started

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

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 @vivi/foundation.slint.

`AppBarStyle`

Defines the visual settings of a button.

Fields

border_style (BorderStyle): Defines the style of the background border.
text_style (TextStyle): Defines the style of the text.
leading_button_style (ButtonStyle): Defines the style of leading button.
layout_style (LayoutStyle): Defines the style of the layout.

`AppBarBase`

The AppBarBase represents the base for app bar elements that can be styled by using AppBarStyle.

Properties

title (in string): Defines the title of the app bar.
leading_button_icon (in string): Defines the icon of the leading button.
style (in AppBarStyle): Defines the style of the button.

Callbacks

leading_button_clicked(): Invoked when leading button clicked.

`BorderStyle`

Defines the visual settings of a group box.

Fields

background (brush): Defines the brush of the background. (default value: black)
border_brush (brush): Defines the border brush. (default value: black)
border_radius (length): Defines the border radius size. (default value: 0)
border_width (length): Defines the width of the border. (default value: 0)

`Border`

Border is just a rectangle with a style.

Properties

background (in brush): The background brush of this Border, typically a color. (default value: black)
border_color (in brush): The color of the border. (default value: transparent)
border_radius (in length): The size of the radius. (default value: 0)
border_width (in length): The width of the border. (default value: 0)
clip (in bool): By default, when an element is bigger or outside another element, it's still shown. When this property is set to true, the children of this Rectangle are clipped to the border of the rectangle. (default value: false)
style (in BorderStyle): Defines the style of the border.

Example

import { Border } from "@vivi/foundation.slint";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    Border {
      style: {
          background: #000000
      };
    }
}

`ButtonStyle`

Defines the visual settings of a button.

Fields

border_style (BorderStyle): Defines the style of the background border.
icon_style (IconStyle): Defines the style of the icon.
text_style (TextStyle): Defines the style of the text.
layout_style (LayoutStyle): Defines the style of the layout.

`ButtonBase`

The ButtonBase represents the base for button elements that can be styled by using 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.
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 "@vivi/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");
        }
    }
}

`CheckBoxStyle`

Defines the visual settings of a checkbox.

Fields

border_style (BorderStyle): Defines the style of the background border.
box_style (BorderStyle): Defines the style of the check box.
box_icon_style (IconStyle): Defines the style of the check box icon.
text_style (TextStyle): Defines the style of the text.
spacing (length): Defines the distance between elements in the checkbox layout. (default value: 0)
layout_style (LayoutStyle): Defines the style of the layout.

`CheckBoxBase`

The CheckBoxBase represents the base for checkbox elements that can be styled by using 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 CheckBoxStyle): Defines the style of the checkbox.

Callbacks

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

Example

import { CheckBoxBase } from "@vivi/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);
        }
    }
}

ComboBoxBase

`FormElementStyle`

Defines the visual settings of a form element.

Fields

title_horizontal_alignment (length): Defines the horizontal text alignment of the title. (default value: left)
title_style (TextStyle): Defines the style of the title.

`FormElementBase`

The FormElementBase represents the base for for elements that can be styled by using FormElementStyle.

Properties

title (in string): A text written as the title of the form element.
style (in FormElementStyle): Defines the style of the form element.

Example

import { FormElementBase, TextBase } from "@vivi/foundation.slint";

export component MyFormElement inherits FormElementBase {
    style: {
        title_style: {
            foreground: black,
            font_size: 12px
        }
    };

    VerticalLayout {
        TextBase {
            style: root.title_style;
            text: root.title;
        }

        @children
    }
}

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

    MyFormElement {
        title: "Element";

        Rectangle {
            width: 60px;
            height: 60px;
            background: green;
        }
    }
}

`GroupBoxStyle`

Defines the visual settings of a group box.

Fields

border_style (BorderStyle): Defines the style of the background border.
spacing (length): Defines the layout spacing. (default value: 0)
padding (length): Defines the layout spacing. (default value: 0)
title_horizontal_alignment (length): Defines the horizontal text alignment of the title. (default value: left)
title_style (TextStyle): Defines the style of the title.

`GroupBoxBase`

The GroupBoxBase represents the base for group box elements that can be styled by using GroupBoxStyle.

Properties

title (in string): Defines the text that is displayed on the top of the group box (default: "").
style (in GroupBoxStyle): Defines the style of the group box.

Example

import { GroupBoxBase, TextBase } from "@vivi/foundation.slint";

export component MyGroupBox inherits GroupBoxBase {
    style: {
        background: black,
        border_radius: 8px,
        title_style: {
            foreground: black,
            font_size: 12px
        }
    };

    VerticalLayout {
        TextBase {
            style: root.title_style;
            text: root.title;
        }

        @children
    }
}

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

    MyGroupBox {
        title: "Group";

        Rectangle {
            width: 60px;
            height: 60px;
            background: green;
        }
    }
}

`HorizontalLayoutBase`

It's just a horizontal layout with a style.

Properties

style (in LayoutStyle): Defines the style of the layout.

`IconStyle`

Defines the color and icon_size of an icon.

Fields

foreground (brush): Defines the color of the icon. (default value: black)
icon_size (relative_font_size): 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 "@vivi/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");
    }
}

`TabBarItem`

This struct describes an item of a combo box.

Fields

prefix_icon (image): Defines icon that is displayed in the front of the item.
text (string): Defines the content of the item. (default: "")
closeable (bool): If set to true a close button will be displayed. (default: false)

`TabBarItemStyle`

Defines the visual settings of a combo box item.

Fields

border_style (BorderStyle): Defines the style of the background border.
text_style (TextStyle): Defines the style of the item's text.
layout_style (LayoutStyle): Defines the style of the layout.
icon_style (IconStyle): Defines the style of the item's icon.

`TabBarStyle`

Defines the visual settings of a combo box.

Fields

item_style (TabBarItemStyle): Defines style of the combo box items.

`TabBarBase`

The TabBarBase represents the base for a tab bar component.

Properties

enabled (in bool): If set to false the combo box is disabled.
model (in [TabBarItem]): The list of possible values.
current_index (in_out int): The index of the selected value. (default: -1)
style (in TabBarStyle): Defines the style of the combo box.

Callbacks

selected(/* index */ int): A value was selected from the combo box. The argument is the currently selected value.
close(/* index */ int): If called it indicates the the item on the given index should be closed.

`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 using TextStyle. It inherits 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 "@vivi/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";
    }
}

`TextInputStyle`

Defines the visual settings of a text input.

Fields

border_style (BorderStyle): Defines the style of the background border.
selection_background (brush): Defines the background of the text selection: (default value: black)
selection_foreground (brush): Defines the foreground of the text selection: (default value: black)
icon_style (IconStyle): Defines the style of the prefix_icon.
text_style (TextStyle): Defines the style of the text input.
placeholder_style (TextStyle): Defines the style of the placeholder text.
padding_left (length): Defines the padding on the left side of the text input layout. (default value: 0)
padding_right (length): Defines the padding on the right side of the text input layout. (default value: 0)
padding_top (length): Defines the padding on the top side of the text input layout. (default value: 0)
padding_bottom (length): Defines the padding on the bottom side of the text input layout. (default value: 0)
spacing (length): Defines the distance between elements in the text input layout. (default value: 0) text.
layout_style (LayoutStyle): Defines the style of the layout.

`TextInputBaste`

The TextInputBaste represents the base for text input components.

Properties

enabled (in bool): If set to false the text input is disabled.
has_error (in bool): If set to true the text input is displayed in the error state.
text (in_out string): The text being edited.
placeholder_text (in string): A placeholder text being shown when there is no text in the text input.
style (in TextInputStyle): Defines the style of the text input.

Callbacks

accepted(/* text */ string): Enter was pressed.
edited(/* text */ string): Emitted when the text has changed because the user modified it.

`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 "@vivi/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;
    }
}

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.
key_pressed(/_ event_/ KeyEvent): Invoked when element has focus and a key is pressed. Ignores enter key.

Example

import { FocusTouchArea } from "@vivi/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;
    }
}

`ScrollBarStyle`

Defines the visual settings of a scroll bar.

Fields

border_style (BorderStyle): Defines the style of the background border.
handle_style (BorderStyle): Defines the style of the handle.

`ScrollViewStyle`

Defines the visual settings of a scroll view.

Fields

border_style (BorderStyle): Defines the style of the background border.
scroll_bar_style (ScrollBarStyle): Defines the style of the scroll bars of the scroll view.

`ScrollViewBase`

ScrollViewBase represents the base for scroll view components.

Properties

style (in ScrollBarStyle): Defines the style of the scroll view.
enabled (in bool): Used to render the frame as disabled or enabled, but doesn't change behavior of the widget.
has_focus (in_out bool): Used to render the frame as focused or unfocused, but doesn't change the behavior of the widget.
viewport_width and viewport_height (in-out length): The width and length properties of the viewport
viewport_x and viewport_y (in-out length): The x and y properties of the viewport. Usually these are negative
visible_width and visible_height (out length): The size of the visible area of the ScrollView (not including the scrollbar)

Example

import { ScrollViewBase } from "@vivi/foundation.slint";

export component ScrollView inherits ScrollViewBase {
    flickable := Flickable {
        viewport_x <=> horizontal_scroll_bar.value;
        viewport_y <=> vertical_scroll_bar.value;

        @children
    }
}

export component Example inherits 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; background: blue; }
        Rectangle { width: 30px; height: 30px; x: 175px; y: 130px; background: red; }
        Rectangle { width: 30px; height: 30px; x: 25px; y: 210px; background: yellow; }
        Rectangle { width: 30px; height: 30px; x: 98px; y: 55px; background: orange; }
    }
}

`LayoutStyle`

Defines the style of a layout.

Field

padding_left (length): Defines padding on the left. (default value: 0)
padding_right (length): Defines padding on the right. (default value: 0)
padding_top (length): Defines padding on the top. (default value: 0)
padding_bottom (length): Defines padding on the bottom. (default value: 0)
spacing (length): Defines space between element in the layout (default value: 0)
alignment (`LayoutAlignment): Defines alignment of the layout. (default value: stretch)

`MagicVerticalBox`

It's just a vertical layout with a style.

Properties

style (in LayoutStyle): Defines the style of the layout.

Magic

Magic is a custom component set for Slint and it's part of vivi. The color palette of magic is based on the Catppuccin theme. Rest of the design of the components is based on coop and an own creation.

The components of magic can be imported in Slint files using @vivi/magic.slint.

`AppBar`

An AppBar can be placed at the top of an app and contains a leading button, title and extra content.

Properties

title (in string): Defines the title of the app bar.
leading_button_icon (in string): Defines the icon of the leading button.
style (in AppBarStyle): Defines the style of the button.

Callbacks

leading_button_clicked(): Invoked when leading button clicked.

Example

import { AppBar, IconButton, Icons, MagicWindow } from "@vivi/magic.slint";

export component MainWindow inherits MagicWindow {
  min_width: 400px;
  min_height: 600px;

  VerticalLayout {
    AppBar {
      leading_button_icon: Icons.add;
      title: "My app";

      IconButton {
        icon: Icons.add;
      }
    }

    Rectangle {}
  }
}

`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 CheckBoxStyle): Defines the style of the checkbox.

Callbacks

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

Example

import { CheckBox } from "@vivi/magic.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, MagicVerticalBox } from "@vivi/magic.slint";
export component Example inherits Window {
    MagicVerticalBox {
        CircularProgressSlider {
          value: 50;
        }
    }
}

ComboBox

`FormElement`

A FormElement is a container that groups its children together under a common title without background.

Properties

title (in string): A text written as the title of the form element.
style (in FormElementStyle): Defines the style of the form element.

Example

import { FormElement, FilledButton } from "@vivi/magic.slint";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    FormElement {
        title: "Button";
        FilledButton {
          text: "Click me";
        }
    }
}

`GroupBox`

A GroupBox is a container that groups its children together under a common title.

Properties

title (in string): A text written as the title of the group box.
style (in GroupBoxStyle): Defines the style of the group box.

Example

import { GroupBox , MagicVerticalBox, CheckBox } from "@vivi/magic.slint";
export component Example inherits Window {
    width: 200px;
    height: 100px;
    GroupBox {
        title: "Groceries";
        VerticalLayout {
            CheckBox { text: "Bread"; checked: true ;}
            CheckBox { text: "Fruits"; }
        }
    }
}

`IconButton`

A button with only an icon as content.

Properties

icon (in image): The image to show in the button.
inline (in bool): If set to true the button can shrink to the size of the icon.
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.

Callbacks

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

Example

import { IconButton, MagicVerticalBox } from "@vivi/magic.slint";
export component Example inherits Window {
    MagicVerticalBox {
        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.
info (out image): Info icon.
castle (out image): Castle icon.
star (out image): Star icon.
edit (out image): Edit icon.
keyboard (out image): Keyboard 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.

`ColorTheme`

This enum defines the color theme of the MagicPalette.

Cat: Uses a color theme based on Catppuccin.
Pure: Uses a color theme based on the origin color theme of coop.

`MagicPalette`

Use MagicPalette to create custom components that are matches the design of the magic component set. The base platte is based on the Catppuccin theme. There is also an alternative color palette called pure, it's the origin color platte of coop the successor project of vivi.

The dark variant is based on catppuccin macchiato colors and the light variant on catppuccin latte.

Properties

background (out brush): fines 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.
placeholder_foreground (out brush): Defines the foreground brush that is used for placeholder content.
alternate_background (out brush): Defines an alternate background brush that is used for example for text input controls or panels like a side bar.
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 (in_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.
alternate_accent_background (out brush): Defines an alternate 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 component borders.
focus_border (out brush): Defines brush of focus borders.
state_pressed (out brush): Defines the brush of the state overlay if the component is pressed.
state_hovered (out brush): Defines the brush of the state overlay if the component is hovered by the mouse pointer.
selection_background (out brush): Defines the background brush of a text selection.
dark_color_scheme (out brush): If color_scheme is set to dark it is true otherwise false.
color_scheme (in_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.
color_theme (in_out ColorTheme): Defines the color theme of the magic palette.

`MagicFontSettings`

Use MagicFontSettings to create custom components that matches the font settings of the magic style.

Properties

light_font_weight (out int): Defines the light font weight of the magic style.
regular_font_weight (out int): Defines the regular font weight of the magic style.
semi_bold_font_weight (out int): Defines the semi bold font weight of the magic style.
light (out TextStyle): Defines a text style for a sub text.
supporting (out TextStyle): Defines a text style for a supporting text.
body (out TextStyle): Defines the body text style of magic.
body_strong (out TextStyle): Defines body text style with more bold font.
header_1 (out TextStyle): Defines a header text style first order.
header_2 (out TextStyle): Defines a header text style second order .
header_3 (out TextStyle): Defines a header text style third order.

`MagicIconSettings`

Use MagicIconSettings to create custom components that matches the icon settings of the magic style.

Properties

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

`MagicAnimationSettings`

Use MagicAnimationSettings to create animations for custom components that matches the animation settings of the magic style.

Properties

color_duration (out duration): Defines the animation duration for color animations.
resize_duration (out duration): Defines the animation duration of resizing of an element.
move_in_duration (out duration): Defines the animation duration of elements entering the screen.
move_out_duration (out duration): Defines the animation duration of elements exit the screen.
move_in_easing (out easing): Defines the animation easing of elements entering the screen.
move_out_easing (out easing): Defines the animation easing of elements exit the screen.

`MagicSizeSettings`

Use MagicSizeSettings to define sizes of custom components that matches the settings of the magic style.

Properties

mobile_size (in_out bool): If set to true the size settings are increased to make the components better touchable on mobile. (default value: false)
box_height (out length): Defines the height of box elements like checkbox.
item_height (out length): Defines the height of list item elements.
control_height (out length): Defines the default height of controls like buttons.
app_bar_height (out length): Defines the min height of the app bar.
min_text_field_width (out length): Defines the min width of text input elements.
min_text_area_height (out length): Defines the min height of a text area.

`MagicLayoutSettings`

Use MagicLayoutSettings to define padding and spacing of custom components that matches the settings of the magic style.

Properties

layout_spacing (out length): Defines the default inner spacing of layouts.
layout_padding (out length): Defines the default padding of layouts.
alternate_layout_padding (out length): Defines the alternate padding of layouts.
control_spacing (out length): Defines the default inner spacing of elements inside of a component.
control_padding (out length): Defines the default padding of a component.
text_input_padding (out length): Defines the default padding of a text input components.
control_style (out LayoutStyle): Defines the default layout style of controls / components.
control_style (out LayoutStyle): Defines the default layout style of e.g. AppBar.
text_input_style (out LayoutStyle): Defines the default layout style of text input elements.

`MagicBorderSettings`

Use MagicBorderSettings to define border setting of custom components that matches the magic style.

Properties

bar_border_radius (out length): Defines the border radius of bar elements like checkbox.
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 component.
control_border_width (out length): Defines the default border width of elements inside of a component.
alternate_border_style (out BorderStyle): Defines the style of a background border with a alternate background color.
popup_border_style (out BorderStyle): Defines the style of a popup border.

`StateLayer`

The StateLayer can be used to create custom widget with a state indication like pressed or hovered. The state layer should 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)
has_error (in bool): Set to true to display the state layer in the error state. (default value: false)
focus_padding (in length): Defines the padding of the focus border (default value: 2px)

Example

import { StateLayer } from "@vivi/magic.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.
prefix_icon (in image): The image to show before the text.
suffix_icon (in image): The image to show after the text.
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.

Callbacks

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

Example

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

`TabBar`

The TabBar displays a list of tab items and is used for tab based navigation.

Properties

enabled (in bool): If set to false the combo box is disabled.
model (in [TabBarItem]): The list of possible values.
current_index (in_out int): The index of the selected value. (default: -1)
style (in TabBarStyle): Defines the style of the combo box.

Callbacks

selected(/* index */ int): A value was selected from the combo box. The argument is the currently selected value.
close(/* index */ int): If called it indicates the the item on the given index should be closed.

Example

import { TabBar } from "@vivi/magic.slint";
export component Example inherits Window {
    MagicVerticalBox {
        TabBar {
          model: [
              { text: "Tab 1" },
              { text: "Tab 2" }
          ];
        }
    }
}

`TextButton`

A button with no background and border.

Properties

text (in string): The text written in the button.
prefix_icon (in image): The image to show before the text.
suffix_icon (in image): The image to show after the text.
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.

Callbacks

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

Example

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

`TextArea`

The TextArea used to enter a multi line text.

Properties

enabled (in bool): If set to false the text field is disabled.
read_only (in bool): When set to true, text editing via keyboard and mouse is disabled but selecting text is still enabled as well as editing text programmatically (default value: false)
wrap (in TextWrap): The way the text wraps (default: word-wrap).
horizontal_alignment (in TextHorizontalAlignment): The horizontal alignment of the text.
has_error (in bool): If set to true the text field is displayed in the error state.
has_focus: (out bool): Set to true when the text field currently has the focus.
text (in_out string): The text being edited.
placeholder_text (in string): A placeholder text being shown when there is no text in the text field.
style (in TextInputStyle): Defines the style of the text field.

Callbacks

_ accepted(/* text */ string): Enter was pressed. _ edited(/* text */ string): Emitted when the text has changed because the user modified it.

Functions

focus() Call this function to focus the text field and make it receive future keyboard events.
clear_focus() Call this function to remove keyboard focus from this LineEdit if it currently has the focus.
set_selection_offsets(int, int) Selects the text between two UTF_8 offsets.
select_all() Selects all text.
clear_selection() Clears the selection.
copy() Copies the selected text to the clipboard.
cut() Copies the selected text to the clipboard and removes it from the editable area.
paste() Pastes the text content of the clipboard at the cursor position.

Example

import { TextArea } from "@vivi/magic.slint";
export component Example inherits Window {
    width: 200px;
    height: 64px;
    TextArea {
        width: parent.width;
        height: parent.height;
        placeholder_text: "Enter text here";
    }
}

`TextField`

The TextField used to enter a single line text.

Properties

enabled (in bool): If set to false the text field is disabled.
read_only (in bool): When set to true, text editing via keyboard and mouse is disabled but selecting text is still enabled as well as editing text programmatically (default value: false)
input_type (in InputType): The way to allow special input viewing properties such as password fields (default value: text).
has_error (in bool): If set to true the text field is displayed in the error state.
has_focus: (out bool): Set to true when the text field currently has the focus.
text (in_out string): The text being edited.
placeholder_text (in string): A placeholder text being shown when there is no text in the text field.
prefix_icon (in image): Sets the icon that is displayed in front of the text.
style (in TextInputStyle): Defines the style of the text field.

Callbacks

_ accepted(/* text */ string): Enter was pressed. _ edited(/* text */ string): Emitted when the text has changed because the user modified it.

Functions

focus() Call this function to focus the text field and make it receive future keyboard events.
clear_focus() Call this function to remove keyboard focus from this LineEdit if it currently has the focus.
set_selection_offsets(int, int) Selects the text between two UTF_8 offsets.
select_all() Selects all text.
clear_selection() Clears the selection.
copy() Copies the selected text to the clipboard.
cut() Copies the selected text to the clipboard and removes it from the editable area.
paste() Pastes the text content of the clipboard at the cursor position.

Example

import { TextField } from "@vivi/magic.slint";
export component Example inherits Window {
    width: 200px;
    height: 25px;
    TextField {
        width: parent.width;
        height: parent.height;
        placeholder_text: "Enter text here";
    }
}

`Time`

Defines a time with hours, minutes, and seconds.

Fields

hour(int): The hour value (range from 0 to 23).
minute(int): The minute value (range from 1 to 59).
second(int): The second value (range form 1 to 59).

`TimePickerStyle`

Defines the visual settings of a time picker.

Fields

border_style (BorderStyle): Defines the style of the background border.
layout_style (LayoutStyle): Defines the style of the layout.
text_style (TextStyle): Defines the style of the text.
text_input_style (TextStyle): Defines the style of text input elements.

`TimePickerPopup`

Use the timer picker to select the time, in either 24-hour or 12-hour mode (AM/PM).

Properties

style: (in TimePickerStyle): Defines the style of the timer picker.
use_24-hour_format: (in bool): If set to true 24 hours are displayed otherwise it is displayed in AM/PM mode. (default: system default, if cannot be determined then true)
title (in string): The text that is displayed at the top of the picker.
initial_time: (in struct Time): Set the initial displayed time.

Callbacks

canceled(): The cancel button was clicked.
accepted(/* time */ Time) The ok button was clicked.

Example

import { FilledButton, TimePickerPopup } from "@vivi/foundation.slint";
export component Example inherits Window {
    width: 600px;
    height: 600px;

    time_picker_button := FilledButton {
        text: @tr("Open TimePicker");

        clicked => {
            time_picker.show();
        }
    }

    time_picker := TimePickerPopup {
        canceled => {
            time-picker.close();
        }

        accepted(time) => {
            debug(time);
            time-picker.close();
        }
    }
}

`OutlineButton`

A button with an outline border.

Properties

text (in string): The text written in the button.
prefix_icon (in image): The image to show before the text.
suffix_icon (in image): The image to show after the text.
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.

Callbacks

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

Example

import { OutlineButton, MagicVerticalBox } from "@vivi/magic.slint";
export component Example inherits Window {
    MagicVerticalBox {
        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, MagicVerticalBox } from "@vivi/magic.slint";
export component Example inherits Window {
    MagicVerticalBox {
        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.

`MagicButtonBase`

The MagicButtonBase represents the base for button elements that can be styled by using ButtonStyle and matches the magic 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.
mouse_cursor (out MouseCursor): The mouse cursor type when the mouse is hovering the button.
preferred_min_width (in length): Defines the preferred min width.
preferred_min_height (in length): Defines the preferred min height.

Callbacks

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

Example

import { MagicButtonBase, MagicText } from "@vivi/magic.slint";

export component MyButton inherits MagicButtonBase {
    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 := MagicText {
        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");
        }
    }
}

`MagicHorizontalBox`

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

`MagicIcon`

The MagicIcon represents an icon element that matches the settings of the magic 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 { MagicIcon } from "@vivi/magic.slint";

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

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

`MagicProgressSliderBase`

The MagicProgressSliderBase 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.

`MagicText`

The MagicText represents the base for text element that matches the magic 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 { MagicText } from "@vivi/magic.slint";

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

    MagicText {
        text: "magic text";
    }
}

`MagicListViewItem`

A MagicListViewItem defines an item of the MagicListView.

`MagicListViewItemStyle`

A MagicListViewItemStyle defines an style of a magic list view item.

Fields

border_style (BorderStyle): Defines the style of the background border.
text_style (TextStyle): Defines the style of the item's text.
supporting_text_style (TextStyle): Defines the style of the item's supporting text.
icon_style (IconStyle): Defines the style of the item's icon.
layout_style (LayoutStyle): Defines the style of the layout.

Fields

prefix_icon (image): Defines icon that is displayed in the front of the item.
text (string): Defines the content of the item.
supporting_text (string): Defines the supporting text of the item.

`MagicListView`

A MagicListView provides a model and generates the visual presentation of its items.

Properties

style (in ScrollBarStyle): Defines the style of the scroll view.
enabled (in bool): Used to render the frame as disabled or enabled, but doesn't change behavior of the widget.
has_focus (in-out bool): Used to render the frame as focused or unfocused, but doesn't change the behavior of the widget.
viewport_width and viewport_height (in-out length): The width and length properties of the viewport
viewport_x and viewport_y (in-out length): The x and y properties of the viewport. Usually these are negative
visible_width and visible_height (out length): The size of the visible area of the ScrollView (not including the scrollbar)
model (in [MagicListViewItem]): Defines the list of items.
current_index (in_out int): The index of the selected value. (default: -1)

Example

import { MagicListView, Icons } from "@vivi/magic.slint";
export component Example inherits Window {
    width: 150px;
    height: 150px;
    MagicListView {
        width: 150px;
        height: 150px;
        model: [
            { prefix_icon: Icons.add, text: "Item 1" },
            { prefix_icon: Icons.add, text: "Item 2" },
            { prefix_icon: Icons.add, text: "Item 3" },
            { prefix_icon: Icons.add, text: "Item 4" },
            { prefix_icon: Icons.add, text: "Item 5" },
            { prefix_icon: Icons.add, text: "Item 6" },
        ];
    }
}

`MagicVerticalBox`

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

`MagicWindow`

MagicWindow is the root of the tree of elements that are visible on the screen. It's almost the same a Slint's default window except it defines background and font settings on the window that matches coop's pure design.

The MagicWindow geometry will be restricted by its layout constraints: Setting the width will result in a fixed width, and the window manager will respect the min_width and max_width so the window can't be resized bigger or smaller. The initial width can be controlled with the preferred_width property. The same applies to the Windows height.

Properties

accent_background (in_out brush): Defines the background brush for highlighted controls such as primary buttons.
always_on_top (in bool): Whether the window should be placed above all other windows on window managers supporting it.
background (in brush): The background brush of the Window. (default value: depends on the style)
default_font_family (in string): The font family to use as default in text elements inside this window, that don't have their font_family property set.
default_font_size (in_out length): The font size to use as default in text elements inside this window, that don't have their font_size property set. The value of this property also forms the basis for relative font sizes.
default_font_weight (in int): The font weight to use as default in text elements inside this window, that don't have their font_weight property set. The values range from 100 (lightest) to 900 (thickest). 400 is the normal weight.
icon (in image): The window icon shown in the title bar or the task bar on window managers supporting it.
no_frame (in bool): Whether the window should be borderless/frameless or not.
resize_border (in length): Size of the resize border in borderless/frameless windows (winit only for now).
title (in string): The window title that is shown in the title bar.

`ScrollView`

A ScrollView contains a viewport that is bigger than the view and can be scrolled. It has scrollbar to interact with. The viewport-width and viewport_height are calculated automatically to create a scrollable view except for when using a for loop to populate the elements. In that case the viewport-width and viewport-height aren't calculated automatically and must be set manually for scrolling to work. The ability to automatically calculate the viewport-width and viewport-height when using for loops may be added in the future and is tracked in issue #407.

Properties

style (in ScrollBarStyle): Defines the style of the scroll view.
enabled (in bool): Used to render the frame as disabled or enabled, but doesn't change behavior of the widget.
has_focus (in-out bool): Used to render the frame as focused or unfocused, but doesn't change the behavior of the widget.
viewport_width and viewport_height (in-out length): The width and length properties of the viewport
viewport_x and viewport_y (in-out length): The x and y properties of the viewport. Usually these are negative
visible_width and visible_height (out length): The size of the visible area of the ScrollView (not including the scrollbar)

Example

import { ScrollView } from "@vivi/magic.slint";
export component Example inherits 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; background: blue; }
        Rectangle { width: 30px; height: 30px; x: 175px; y: 130px; background: red; }
        Rectangle { width: 30px; height: 30px; x: 25px; y: 210px; background: yellow; }
        Rectangle { width: 30px; height: 30px; x: 98px; y: 55px; background: orange; }
    }
}

`Switch`

A Switch is a representation of a physical switch that allows users to turn things on or off. Consider using a CheckBox instead if you want the user to select or deselect values, for example in a list with multiple options.

Properties

checked_icon (in image): The icon that is displayed if checked is true.
unchecked_icon (in image): The icon that is displayed if checked is false.
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 SwitchStyle): Defines the style of the checkbox.

Callbacks

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

Example

import { Switch } from "@vivi/magic.slint";
export component Example inherits Window {
    width: 200px;
    height: 25px;

    Switch {
        text: "Hello World";
    }
}

`ListView`

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

Properties

style (in ScrollBarStyle): Defines the style of the scroll view.
enabled (in bool): Used to render the frame as disabled or enabled, but doesn't change behavior of the widget.
has_focus (in-out bool): Used to render the frame as focused or unfocused, but doesn't change the behavior of the widget.
viewport_width and viewport_height (in-out length): The width and length properties of the viewport
viewport_x and viewport_y (in-out length): The x and y properties of the viewport. Usually these are negative
visible_width and visible_height (out length): The size of the visible area of the ScrollView (not including the scrollbar)

Example

import { ListView } from "@vivi/magic.slint";
export component Example inherits 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;
            background: data.bg;
            width: parent.width;
            Text {
                x: 0;
                text: data.text;
                color: data.color;
            }
        }
    }
}

vivi 0.2 reference