Körsatiş · primitive
Iş holati
Vazifa holati doirasi: backlog (punktir), qilinadi (çegara), jarayonda (yarmi), tekşiruvda (¾), bajarildi (töla + ✓), bekor (xira + ×). Şakl va rang birga. Ustuvorlik rangi (Ustoz 21.10): data-priority="urgent|high|normal|low" — şakl holatni, rang ustuvorlikni bildiradi (bajarilgan va bekor — öz rangida). Haqiqiy foiz: --fx-flow-value. Yorliq .fx-flow-tag — doira + söz kapsulada, data-variant="soft" — rangli oç fon.
Şoşilinç
Yuqori
Oddiy
Past
RejadaNavbatdaJarayondaPauzaKörib çiqilmoqdaBajarildiBekor
Şoşilinç · 80 %Yuqori · 46 %Oddiy · 25 %Past · 10 %
TösiqXatoJonliYangilaniş bor
QoralamaJarayondaKörib çiqilmoqdaBajarildi
PauzaTösiqQisman
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | backlogtodoprogressreviewdonecancelledpaused pauza — sokin doira ⏸ (ataylab töxtatilgan; tösiq emas)blocked tösiq — romb «!»failed xato — doira «×»live jonli / işlayapti — doira «▶»update yangilaniş bor — kvadrat «!» | todo |
data-size | mdlg | md |
data-priority | urgent şoşilinç — qizilhigh yuqori — töq sariqnormal oddiy — moviylow past — kulrang | — |
data-tone | status semantik: bajarildi — yaşil, körib çiqiş — kök, jarayon — töq sariq, qoralama — töq kulrang | — |
data-size | lg katta — 44 px, matn md | sm |
data-shape | icon faqat ikon — kvadrat plitka; nom aria-label/title'da | — |
Anatomiya
- root
.fx-flowşart - tag
.fx-flow-tagixtiyoriy
Klaviatura va kiriş
role=img va aria-label — holat nomi.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Vazifa, sprint, reliz holati röyxat va doskada.
Işlatmang
- Tölov yoki umumiy holat söz bilan →
status - Holatni faqat rang bilan bildirmang — içki şakl ham özgaradi.
npx foxui add flow
<span class="fx-flow" data-state="backlog" role="img" aria-label="Backlog"></span> <span class="fx-flow" data-state="todo" role="img" aria-label="Qilinadi"></span> <span class="fx-flow" data-state="progress" role="img" aria-label="Jarayonda"></span> <span class="fx-flow" data-state="review" role="img" aria-label="Tekşiruvda"></span> <span class="fx-flow" data-state="done" role="img" aria-label="Bajarildi"></span> <span class="fx-flow" data-state="cancelled" role="img" aria-label="Bekor"></span> <!-- shakl — holat, rang — ustuvorlik --><div style="inline-size:100%;display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-space-4)"><span style="inline-size:7rem;color:var(--fx-text-tertiary);font-size:var(--fx-font-size-xs)">Şoşilinç</span><span class="fx-flow" data-size="lg" data-state="backlog" data-priority="urgent" role="img" aria-label="Rejada, şoşilinç"></span><span class="fx-flow" data-size="lg" data-state="todo" data-priority="urgent" role="img" aria-label="Navbatda, şoşilinç"></span><span class="fx-flow" data-size="lg" data-state="progress" data-priority="urgent" role="img" aria-label="Jarayonda, şoşilinç"></span><span class="fx-flow" data-size="lg" data-state="review" data-priority="urgent" role="img" aria-label="Körib çiqilmoqda, şoşilinç"></span><span class="fx-flow" data-size="lg" data-state="done" data-priority="urgent" role="img" aria-label="Bajarildi, şoşilinç"></span><span class="fx-flow" data-size="lg" data-state="cancelled" data-priority="urgent" role="img" aria-label="Bekor, şoşilinç"></span></div><div style="inline-size:100%;display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-space-4)"><span style="inline-size:7rem;color:var(--fx-text-tertiary);font-size:var(--fx-font-size-xs)">Yuqori</span><span class="fx-flow" data-size="lg" data-state="backlog" data-priority="high" role="img" aria-label="Rejada, yuqori"></span><span class="fx-flow" data-size="lg" data-state="todo" data-priority="high" role="img" aria-label="Navbatda, yuqori"></span><span class="fx-flow" data-size="lg" data-state="progress" data-priority="high" role="img" aria-label="Jarayonda, yuqori"></span><span class="fx-flow" data-size="lg" data-state="review" data-priority="high" role="img" aria-label="Körib çiqilmoqda, yuqori"></span><span class="fx-flow" data-size="lg" data-state="done" data-priority="high" role="img" aria-label="Bajarildi, yuqori"></span><span class="fx-flow" data-size="lg" data-state="cancelled" data-priority="high" role="img" aria-label="Bekor, yuqori"></span></div><div style="inline-size:100%;display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-space-4)"><span style="inline-size:7rem;color:var(--fx-text-tertiary);font-size:var(--fx-font-size-xs)">Oddiy</span><span class="fx-flow" data-size="lg" data-state="backlog" data-priority="normal" role="img" aria-label="Rejada, oddiy"></span><span class="fx-flow" data-size="lg" data-state="todo" data-priority="normal" role="img" aria-label="Navbatda, oddiy"></span><span class="fx-flow" data-size="lg" data-state="progress" data-priority="normal" role="img" aria-label="Jarayonda, oddiy"></span><span class="fx-flow" data-size="lg" data-state="review" data-priority="normal" role="img" aria-label="Körib çiqilmoqda, oddiy"></span><span class="fx-flow" data-size="lg" data-state="done" data-priority="normal" role="img" aria-label="Bajarildi, oddiy"></span><span class="fx-flow" data-size="lg" data-state="cancelled" data-priority="normal" role="img" aria-label="Bekor, oddiy"></span></div><div style="inline-size:100%;display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-space-4)"><span style="inline-size:7rem;color:var(--fx-text-tertiary);font-size:var(--fx-font-size-xs)">Past</span><span class="fx-flow" data-size="lg" data-state="backlog" data-priority="low" role="img" aria-label="Rejada, past"></span><span class="fx-flow" data-size="lg" data-state="todo" data-priority="low" role="img" aria-label="Navbatda, past"></span><span class="fx-flow" data-size="lg" data-state="progress" data-priority="low" role="img" aria-label="Jarayonda, past"></span><span class="fx-flow" data-size="lg" data-state="review" data-priority="low" role="img" aria-label="Körib çiqilmoqda, past"></span><span class="fx-flow" data-size="lg" data-state="done" data-priority="low" role="img" aria-label="Bajarildi, past"></span><span class="fx-flow" data-size="lg" data-state="cancelled" data-priority="low" role="img" aria-label="Bekor, past"></span></div> <div style="inline-size:100%;display:flex;flex-wrap:wrap;gap:var(--fx-space-2)"><span class="fx-flow-tag"><span class="fx-flow" data-state="backlog" aria-hidden="true"></span>Rejada</span><span class="fx-flow-tag"><span class="fx-flow" data-state="todo" aria-hidden="true"></span>Navbatda</span><span class="fx-flow-tag"><span class="fx-flow" data-state="progress" aria-hidden="true"></span>Jarayonda</span><span class="fx-flow-tag"><span class="fx-flow" data-state="paused" aria-hidden="true"></span>Pauza</span><span class="fx-flow-tag"><span class="fx-flow" data-state="review" aria-hidden="true"></span>Körib çiqilmoqda</span><span class="fx-flow-tag"><span class="fx-flow" data-state="done" aria-hidden="true"></span>Bajarildi</span><span class="fx-flow-tag"><span class="fx-flow" data-state="cancelled" aria-hidden="true"></span>Bekor</span></div> <div style="inline-size:100%;display:flex;flex-wrap:wrap;gap:var(--fx-space-2)"><span class="fx-flow-tag" data-variant="soft"><span class="fx-flow" data-state="progress" data-priority="urgent" style="--fx-flow-value: 80%" aria-hidden="true"></span>Şoşilinç · 80 %</span><span class="fx-flow-tag" data-variant="soft"><span class="fx-flow" data-state="progress" data-priority="high" style="--fx-flow-value: 46%" aria-hidden="true"></span>Yuqori · 46 %</span><span class="fx-flow-tag" data-variant="soft"><span class="fx-flow" data-state="progress" data-priority="normal" style="--fx-flow-value: 25%" aria-hidden="true"></span>Oddiy · 25 %</span><span class="fx-flow-tag" data-variant="soft"><span class="fx-flow" data-state="progress" data-priority="low" style="--fx-flow-value: 10%" aria-hidden="true"></span>Past · 10 %</span></div> <div style="inline-size:100%;display:flex;flex-wrap:wrap;gap:var(--fx-space-2)"><span class="fx-flow-tag"><span class="fx-flow" data-state="blocked" aria-hidden="true"></span>Tösiq</span><span class="fx-flow-tag"><span class="fx-flow" data-state="failed" aria-hidden="true"></span>Xato</span><span class="fx-flow-tag"><span class="fx-flow" data-state="live" aria-hidden="true"></span>Jonli</span><span class="fx-flow-tag"><span class="fx-flow" data-state="update" aria-hidden="true"></span>Yangilaniş bor</span></div> <div style="display:grid;grid-template-columns:auto auto;gap:var(--fx-space-3) var(--fx-space-10);justify-content:start;align-items:center"><span class="fx-flow-tag" data-variant="soft" data-tone="status" data-size="lg" data-shape="icon" role="img" aria-label="Qoralama" title="Qoralama"><span class="fx-flow" data-state="backlog" aria-hidden="true"></span></span><span class="fx-flow-tag" data-variant="soft" data-tone="status" data-size="lg"><span class="fx-flow" data-state="backlog" aria-hidden="true"></span>Qoralama</span><span class="fx-flow-tag" data-variant="soft" data-tone="status" data-size="lg" data-shape="icon" role="img" aria-label="Jarayonda" title="Jarayonda"><span class="fx-flow" data-state="progress" aria-hidden="true"></span></span><span class="fx-flow-tag" data-variant="soft" data-tone="status" data-size="lg"><span class="fx-flow" data-state="progress" aria-hidden="true"></span>Jarayonda</span><span class="fx-flow-tag" data-variant="soft" data-tone="status" data-size="lg" data-shape="icon" role="img" aria-label="Körib çiqilmoqda" title="Körib çiqilmoqda"><span class="fx-flow" data-state="review" aria-hidden="true"></span></span><span class="fx-flow-tag" data-variant="soft" data-tone="status" data-size="lg"><span class="fx-flow" data-state="review" aria-hidden="true"></span>Körib çiqilmoqda</span><span class="fx-flow-tag" data-variant="soft" data-tone="status" data-size="lg" data-shape="icon" role="img" aria-label="Bajarildi" title="Bajarildi"><span class="fx-flow" data-state="done" aria-hidden="true"></span></span><span class="fx-flow-tag" data-variant="soft" data-tone="status" data-size="lg"><span class="fx-flow" data-state="done" aria-hidden="true"></span>Bajarildi</span></div> <div style="display:flex;flex-wrap:wrap;gap:var(--fx-space-2)"><span class="fx-flow-tag" data-variant="soft" data-tone="status"><span class="fx-flow" data-state="paused" aria-hidden="true"></span>Pauza</span><span class="fx-flow-tag" data-variant="soft" data-tone="status"><span class="fx-flow" data-state="blocked" aria-hidden="true"></span>Tösiq</span><span class="fx-flow-tag" data-variant="soft" data-tone="status"><span class="fx-flow" data-state="progress" aria-hidden="true"></span>Qisman</span></div>
Tokenlar: --fx-bg-brand-solid --fx-bg-static-light --fx-bg-surface --fx-border-color-default --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-fg-error --fx-fg-info --fx-fg-success --fx-fg-warning --fx-flow-value --fx-font-size-md --fx-font-size-xs --fx-font-weight-medium --fx-knob-pill --fx-radius-badge --fx-radius-circle --fx-radius-control --fx-radius-pill --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary
Şu toifadan
Nişon kartasiYutuq nişoni: belgi (emoji yoki ikon) + nom + sabab.BiriktirmaFayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği.Audio pleyerIxçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×).AvatarKvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle).Belgi (badge)Holat yoki toifa yorliği.Boğlovçi nurIntegratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi.