التوثيق
تركيب شاشة من الأنماط
ابنِ لوحة معلومات صغيرة من أنماط التخطيط والبيانات والتنبيه، مع تبويبات تبدّل الجسم المعروض.
في هذه الصفحة
الشاشة في Orb شجرة من الأنماط. يبني هذا الدرس لوحة معلومات فيها بطاقات أرقام وتنبيه وتبويب للفريق، ويعرض كيف تبدّل السمة بين الأجسام.
1. التخطيط أولًا
يرتّب stack العناصر في صف أو عمود، ويضعها simple-grid في أعمدة متساوية:
lolo
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. التنبيه
يعرض alert رسالة بنبرة (info وsuccess وwarning وerror). تأتي النبرات من السمة البصرية، فيبدو البرنامج نفسه صحيحًا في كل سمة.
lolo
{ type: alert, variant: warning, message: "One order is past its delivery date." }3. تبويبات ترسل أحداثًا
التبويبات أزرار متنكرة: كل عنصر يسمّي الحدث الذي يرسله. لكل حدث انتقال، وكل انتقال يرسم جسمه. وتحدد الخاصية activeTab التبويب الحالي.
lolo
▼{ type: tabs, activeTab: "overview", items: [
{ id: "overview", label: "Overview", event: SHOW_OVERVIEW },
{ id: "team", label: "Team", event: SHOW_TEAM }
] }4. لوحة المعلومات المكتملة
آلة الحالات
Dashboard
on Board · states: 2 · transitions: 3emitsMOVED
INIT
SHOW_TEAM
SHOW_OVERVIEW
nowoverview
team
يعمل الآن مباشرة
Open orders
18
Shipped today
7
Late
1
One order is past its delivery date.
السمة نفسها كآلة حالات: كل مربع حالة، وكل سهم حدث ينقلها، والأيقونات على السهم هي التأثيرات التي يشغّلها ذلك الحدث. مرّر المؤشر فوق أي رمز لترى ما يفعله. كيف تقرأ AVL
std-orb-docex-dashboard.lolololo
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}ما الذي يحدث عندما يقع الحدث SHOW_TEAM:
overviewSHOW_TEAM
→
teamEffects (2)What runs, in order, when the transition fires.
(set @entity.tab "team")التالي
الشروط تجعل الانتقالات مشروطة.
Not reported here