Vzorci vmesnika
Kaj zna narisati render-ui: drevo registriranih vzorcev, vezano na entiteto.
render-ui nariše drevo vzorcev v režo. Vsako vozlišče je objekt, katerega type poimenuje registrirani vzorec, ob njem pa so lastnosti vzorca. Register je zaprt: neznan type ali lastnost je napaka preverjanja, zato se program in zaslon ne moreta razhajati.
1(render-ui main { type: stack, direction: vertical, gap: md, children: [
2 { type: typography, content: "Orders", variant: h2 },
3 { type: data-list, entity: ?data, fields: [{ name: "title", label: "Order", variant: h4 }] },
4 { type: button, label: "New order", action: CREATE, variant: primary }
5] })Družine
| Družina | Vzorci |
|---|---|
| Postavitev | stack, box, container, simple-grid, split, card, divider |
| Besedilo in mediji | typography, markdown-content, code-block, image, icon, badge, avatar |
| Podatki | data-list, data-grid, table-view, card-grid, stat-display, chart |
| Vnos | button, input, form-section, search-input, tabs, menu |
| Povratna informacija | alert, skeleton, empty-state, progress-bar |
| Diagrami in platna | avl-state-machine, avl-transition-explainer, math-canvas, graph-canvas |
Vezave v drevesu
Lastnosti so lahko vezane: content: @entity.count se znova nariše, ko se polje spremeni, entity: ?data vzame vrstice, ki jih je prinesel fetch, (if …) ali (str/concat …) pa lastnost izračunata iz entitete. action: EVENT na gumbu pošlje ta dogodek njegovi lastnosti; href: "/path" ga naredi za povezavo.
Menjava prikazanega
Lastnost pokaže različne zaslone tako, da v vsakem prehodu znova riše. Tu zavihki pošiljajo dogodke, prehod vsakega dogodka pa nariše ustrezno telo:
Dashboard
on Board · states: 2 · transitions: 318
7
1
One order is past its delivery date.
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")Dostopnost
Vsak vzorec, ki potrebuje ime, ga mora imeti: oznako, alt ali aria-label. Gumb s samo ikono brez imena je ORB_A11Y_UNNAMED. Atributi ARIA (aria-label, aria-live, role, dir, …) se pišejo kot lastnosti, natanko tako, kot se črkujejo.
Naprej
Vodnik o vzorcih vmesnika korak za korakom zgradi zaslon.