Sestavljanje zaslona iz vzorcev
Zgradi majhno nadzorno ploščo iz vzorcev postavitve, podatkov in povratnih informacij, z zavihki, ki menjajo telo.
Zaslon v Orbu je drevo vzorcev. Ta vodnik zgradi nadzorno ploščo s ploščicami števil, opozorilom in zavihkom ekipe ter pokaže, kako lastnost menja telesa.
1. Najprej postavitev
stack razporedi elemente v vrstico ali stolpec; simple-grid jih postavi v enake stolpce:
1{ type: simple-grid, cols: 3, gap: md, children: [
2 { type: stat-display, label: "Open orders", value: 18 },
3 { type: stat-display, label: "Shipped today", value: 7 },
4 { type: stat-display, label: "Late", value: 1 }
5] }2. Povratna informacija
alert pokaže sporočilo s tonom (info, success, warning, error). Toni prihajajo iz teme, zato je isti program pravilen v vsaki temi.
{ type: alert, variant: warning, message: "One order is past its delivery date." }3. Zavihki, ki pošiljajo dogodke
Zavihki so preoblečeni gumbi: vsak element poimenuje dogodek, ki ga pošlje. Vsak dogodek ima prehod in vsak prehod nariše svoje telo. Lastnost activeTab označi trenutnega.
▼{ type: tabs, activeTab: "overview", items: [
{ id: "overview", label: "Overview", event: SHOW_OVERVIEW },
{ id: "team", label: "Team", event: SHOW_TEAM }
] }4. Dokončana nadzorna plošča
Dashboard
on Board · states: 2 · transitions: 318
7
1
One order is past its delivery date.
Ista lastnost kot avtomat stanj: vsak okvir je stanje, vsaka puščica dogodek, ki ga premakne, ikone na puščici pa so učinki, ki jih ta dogodek izvede. Z miško pojdite čez simbol in videli boste, kaj naredi. Kako brati AVL
1app std-orb-docex-dashboard "1.0.0"
2"std-orb-docex-dashboard — UI patterns: a render-ui tree of layout, display and action patterns, with tabs that switch what the main slot shows."
3orbital DashboardOrbital {
4 entity Board [runtime] {
5 id : string!
6 tab : "overview" | "team" = overview
7 }
8
9 trait Dashboard -> Board [interaction, instance] {
10 initial: overview
11
12 state overview {
13 INIT -> overview
14 (render-ui main { type: stack, direction: vertical, gap: md, children: [
15 { type: tabs, items: [{ id: "overview", label: "Overview", event: SHOW_OVERVIEW }, { id: "team", label: "Team", event: SHOW_TEAM }], activeTab: "overview" },
16 { type: simple-grid, cols: 3, gap: md, children: [
17 { type: stat-display, label: "Open orders", value: 18 },
18 { type: stat-display, label: "Shipped today", value: 7 },
19 { type: stat-display, label: "Late", value: 1 }
20 ] },
21 { type: alert, variant: warning, message: "One order is past its delivery date." }
22 ] })
23 SHOW_TEAM -> team
24 (emit MOVED { event: "SHOW_TEAM" })
25 (set @entity.tab team)
26 (render-ui main { type: stack, direction: vertical, gap: md, children: [
27 { type: tabs, items: [{ id: "overview", label: "Overview", event: SHOW_OVERVIEW }, { id: "team", label: "Team", event: SHOW_TEAM }], activeTab: "team" },
28 { type: stack, direction: horizontal, gap: md, align: center, children: [
29 { type: avatar, name: "Huda", size: md },
30 { type: typography, content: "Huda · warehouse lead", variant: body }
31 ] },
32 { type: stack, direction: horizontal, gap: md, align: center, children: [
33 { type: avatar, name: "Luka", size: md },
34 { type: typography, content: "Luka · dispatch", variant: body }
35 ] }
36 ] })
37 }
38
39 state team {
40 SHOW_OVERVIEW -> overview
41 (emit MOVED { event: "SHOW_OVERVIEW" })
42 (set @entity.tab overview)
43 (render-ui main { type: stack, direction: vertical, gap: md, children: [
44 { type: tabs, items: [{ id: "overview", label: "Overview", event: SHOW_OVERVIEW }, { id: "team", label: "Team", event: SHOW_TEAM }], activeTab: "overview" },
45 { type: simple-grid, cols: 3, gap: md, children: [
46 { type: stat-display, label: "Open orders", value: 18 },
47 { type: stat-display, label: "Shipped today", value: 7 },
48 { type: stat-display, label: "Late", value: 1 }
49 ] },
50 { type: alert, variant: warning, message: "One order is past its delivery date." }
51 ] })
52 }
53
54 emits {
55 MOVED -> external {
56 event : string!
57 }
58 @description "Each move names the event it took, so the diagram beside the demo can follow it."
59 }
60 }
61
62 page "/dashboard" -> Dashboard
63}Kaj se zgodi, ko se sproži SHOW_TEAM:
→
team(set @entity.tab "team")Naprej
Pogoji naredijo prehode pogojne.