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.

`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.
border_style (out BorderStyle): Gets the style of the background border.
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.
layout_style (out LayoutStyle): Gets the style of the layout.
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.
border_style (out BorderStyle): Gets the style of the background border.
box_style (out Border): Gets the style of the check box..
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.- layout_style (out LayoutStyle): Gets the style of the layout.

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.
title_style (out TextStyle): Gets the style of the title 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.
border_style (out BorderStyle): Gets the style of the background border.
title_style (out TextStyle): Gets the style of the title 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 (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 "@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");
    }
}

`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.
prefix_icon (in image): Sets the icon that is displayed in front of the text.
style (in TextInputStyle): Defines the style of the text input.
border_style (out BorderStyle): Gets the style of the background border.
icon_style (out IconStyle): Gets the style of the icon of the text input.
text_style (out TextStyle): Gets the style of the text of the text input.
placeholder_style (out TextStyle): Gets the style of the placeholder text.
layout_style (out LayoutStyle): Gets the style of the layout.

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.
border_style (out BorderStyle): Gets the style of the background border.
scroll_bar_style (out BorderStyle): Gets the style of the scroll bars.
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.

`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.
box_style (out BorderStyle): Gets the style of the check box.
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.
layout_style (out LayoutStyle): Gets the style of the layout.

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.
title_style (out TextStyle): Gets the style of the title 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.
border_style (out BorderStyle): Gets the style of the background border.
title_style (out TextStyle): Gets the style of the title 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.
border_style (out BorderStyle): Gets the style of the background border.
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.
layout_style (out LayoutStyle): Gets the style of the layout.

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

`MagicPalette`

Use MagicPalette to create custom components that are matches the design of the magic component set. The platte is based on the Catppuccin theme.

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.
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 (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.

`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.
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.

`MagicSizeSettings`

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

Properties

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

`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.
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.

`MagicBorderSettings`

Use MagicBorderSettings to define border setting of custom components that matches the magic 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 component.

`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.
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.
border_style (out BorderStyle): Gets the style of the background border.
text_style (out TextStyle): Gets the style of the text of the button.
layout_style (out LayoutStyle): Gets the style of the layout.

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

`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.
border_style (out BorderStyle): Gets the style of the background border.
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.
layout_style (out LayoutStyle): Gets the style of the layout.

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

`TextField`

The TextField used to enter a single line text.

Properties

enabled (in bool): If set to false the text field is disabled.
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.
border_style (out BorderStyle): Gets the style of the background border.
icon_style (out IconStyle): Gets the style of the icon of the text field.
text_style (out TextStyle): Gets the style of the text of the text field.
placeholder_style (out TextStyle): Gets the style of the placeholder text.
layout_style (out LayoutStyle): Gets the style of the layout.

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

`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.
border_style (out BorderStyle): Gets the style of the background border.
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.
layout_style (out LayoutStyle): Gets the style of the layout.

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.
border_style (out BorderStyle): Gets the style of the background border.
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.
layout_style (out LayoutStyle): Gets the style of the layout.
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.
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.

`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)

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.
border_style (out BorderStyle): Gets the style of the background border.
scroll_bar_style (out BorderStyle): Gets the style of the scroll bars.
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.
box_style (out BorderStyle): Gets the style of the check box.
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.
layout_style (out LayoutStyle): Gets the style of the layout.

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.1 reference