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

// BackButton — touch-target-safe pressable area with a back arrow icon.

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

/// Touch-target-safe back button for the GameTopBar.
export component BackButton inherits Rectangle {
    /// Callback fired for c l i c k e d.
    callback clicked();
    /// Icon glyph to render (default: Fluent back-arrow U+E72B).
    in property <string> icon: "";

    min-width: SteamSpacing.control-lg;
    background: back-ta.has-hover ? SteamColors.accent.with-alpha(Sizes.alpha-12) : transparent;
    border-radius: SteamSpacing.sm;

    back-ta := TouchArea {
        clicked => { root.clicked(); }
    }
    Text {
        text: root.icon;
        font-size: Sizes.icon-md;
        color: SteamColors.text-primary;
        horizontal-alignment: center;
        vertical-alignment: center;
    }
}