slint-ui-templates 0.1.0

Composable Slint UI building blocks — mother-child pattern, token-driven
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

// CompactNavItem — one item in the CompactNav bar.
// Touch-target sized, icon + label, active highlight.

import { SteamColors, SteamSpacing, SteamType, SteamRadius } from "../../tokens/steam/mod.slint";
import { Sizes } from "../../tokens/sizes.slint";
import { NavItem } from "../types.slint";

/// One item inside the compact nav bar — icon + label, touch-target sized.
export component CompactNavItem inherits Rectangle {
    /// The nav item data.
    in property <NavItem> item;
    /// Whether this item is currently active.
    in property <bool> active: false;
    /// Fired when this item is tapped.
    callback navigate(string);

    min-width: SteamSpacing.control-lg;
    min-height: SteamSpacing.control-lg;
    border-radius: SteamRadius.md;
    background: root.active ? SteamColors.accent.with-alpha(Sizes.alpha-15) : transparent;

    item-ta := TouchArea {
        clicked => { root.navigate(root.item.id); }
    }

    VerticalLayout {
        alignment: center;
        spacing: SteamSpacing.xs;
        padding: SteamSpacing.xs;

        Text {
            text: root.item.icon;
            font-size: Sizes.icon-md;
            color: root.active ? SteamColors.accent : SteamColors.text-secondary;
            horizontal-alignment: center;
        }

        Text {
            text: root.item.label;
            font-size: SteamType.caption;
            color: root.active ? SteamColors.text-primary : SteamColors.text-secondary;
            horizontal-alignment: center;
        }
    }
}