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
46
47
48

// AppShell — Windows / Fluent 2 desktop shell.
// MenuBar must be declared in the Window (Slint constraint + mother-child rule).
// For Android/Material 3, use MobileShell directly (see mobile/shell.slint).
// For Steam Deck / small-screen, use CompactShell (see small/shell.slint).

import { NavItem, ShellToolbarItem } from "types.slint";
import { DesktopShell } from "desktop/shell.slint";

export { MobileShell }  from "mobile/shell.slint";
export { CompactShell } from "small/shell.slint";
export { MacosShell }   from "macos/MacosShell.slint";

/// Cross-platform shell facade used by the viewer and host applications.
///
/// On desktop it wraps `DesktopShell`; mobile variants are re-exported separately.
export component AppShell inherits Rectangle {
    /// Navigation items rendered in the shell navigation surface.
    in property <[NavItem]>          nav-items;
    /// Id of the currently active content slot.
    in property <string>             active-slot;
    /// Controls whether the desktop toolbar row is visible.
    in property <bool>               show-toolbar:  false;
    /// Toolbar buttons rendered below the desktop menu bar.
    in property <[ShellToolbarItem]> toolbar-items;
    /// Status text shown in the desktop status bar.
    in property <string>             status-text:   "Ready";
    /// Optional progress value for the desktop status bar. Negative hides it.
    in property <float>              progress:      -1.0;

    /// Fired when navigation changes the active slot id.
    callback slot-changed(string);
    /// Fired when a toolbar button is activated.
    callback toolbar-clicked(string);

    DesktopShell {
        nav-items:    root.nav-items;
        toolbar-items: root.toolbar-items;
        show-toolbar: root.show-toolbar;
        active-view:  root.active-slot;
        status-text:  root.status-text;
        progress:     root.progress;
        navigate(id) => {
            root.slot-changed(id);
        }
        toolbar-clicked(id) => { root.toolbar-clicked(id); }
        @children
    }
}