vivi 0.2 reference

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