changelog shortlog graph tags branches changeset files revisions annotate raw help

Mercurial > demo / ui/pages/list_view.slint

changeset 17: e4c9ec452eb6
author: ellis <ellis@rwest.io>
date: Sat, 27 May 2023 21:07:55 -0400
permissions: -rw-r--r--
description: ui work 
     1 import { HorizontalBox, VerticalBox, ListView, StandardListView, GroupBox } from "std-widgets.slint";
     2 import { UiConfig } from "../config.slint";
     3 import { Page } from "page.slint";
     4 
     5 export component ListViewPage inherits Page {
     6     title: "ListView";
     7     description: "ListViews can be used to display a list of elements. The StandardListBox is like the default ListView just with a default text based definition of the visual items. Both can be imported from \"std-widgets.slint\"";
     8 
     9     HorizontalBox {
    10         vertical-stretch: 1;
    11         GroupBox {
    12             title: "ListView";
    13 
    14             ListView {
    15                 vertical-stretch: 0;
    16                 for i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] : HorizontalBox {
    17                    Image {
    18                         width: 24px;
    19                         source: @image-url("../img/ayo.jpeg");
    20                    }
    21                    Text {
    22                         text: "Item " + i;
    23                    }
    24                 }
    25             }
    26         }
    27 
    28         GroupBox {
    29             title: "StandardListView";
    30             vertical-stretch: 0;
    31 
    32             StandardListView {
    33                 model: [
    34                     {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
    35                     {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
    36                     {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
    37                     {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
    38                     {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
    39                     {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
    40                     {text: "Lorem"}, {text: "ipsum"},{text: "dolor"},{text: "sit"},{text: "amet"},{text: "consetetur"},
    41                 ];
    42             }
    43         }
    44     }
    45 }