Körsatiş · primitive
Ustuvorlik
Işning ustuvorligi: 3 ta ösib boruvçi ustunça — past, örta, yuqori; şoşilinç — xavf rangida; yöq — xira. Doim söz bilan (aria-label yoki yonida matn). Belgi varianti data-variant="mark" (Ustoz Figma maketi, 21.10): Jira kabi 10 daraja — trivial, lowest/lower/low (moviy chevronlar pastga), minor, high/higher/highest (qizil yuqoriga), critical, blocker. Yorliq .fx-prio-tag: pastel kapsula, oq doirada belgi — urgent ★, high ✦, normal ▲, low ○.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-level | 0123urgenttrivial faqat data-variant="mark"lowest faqat data-variant="mark"lower faqat data-variant="mark"low faqat data-variant="mark"minor faqat data-variant="mark"high faqat data-variant="mark"higher faqat data-variant="mark"highest faqat data-variant="mark"critical faqat data-variant="mark"blocker faqat data-variant="mark" | 0 |
data-size | mdlg | md |
data-variant | bars 3 ustunça (standart)mark Jira kabi belgilar — data-level: trivial…blocker | bars |
Anatomiya
- root
.fx-prioşart - tag
.fx-prio-tagixtiyoriy
Klaviatura va kiriş
role=img va aria-label (Past / Örta / Yuqori / Şoşilinç).
Kod
AI uçun: qaçon işlatiladi
- Vazifa, murojaat, xato röyxatlarida ustuvorlik.
- Umumiy holat (tölangan, kutilmoqda) →
status - Ustuvorlikni faqat rang bilan bildirmang — ustunça soni ham özgaradi.
npx foxui add prio
<span class="fx-prio" data-level="0" role="img" aria-label="Ustuvorlik yöq"><i></i></span> <span class="fx-prio" data-level="1" role="img" aria-label="Past"><i></i></span> <span class="fx-prio" data-level="2" role="img" aria-label="Örta"><i></i></span> <span class="fx-prio" data-level="3" role="img" aria-label="Yuqori"><i></i></span> <span class="fx-prio" data-level="urgent" role="img" aria-label="Şoşilinç"><i></i></span> <div style="inline-size:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:var(--fx-space-3) var(--fx-space-5);align-items:center"><span style="display:inline-flex;align-items:center;gap:var(--fx-space-2)"><span class="fx-prio" data-variant="mark" data-level="trivial" aria-hidden="true"></span>Ahamiyatsiz</span><span style="display:inline-flex;align-items:center;gap:var(--fx-space-2)"><span class="fx-prio" data-variant="mark" data-level="lowest" aria-hidden="true"></span>Eng past</span><span style="display:inline-flex;align-items:center;gap:var(--fx-space-2)"><span class="fx-prio" data-variant="mark" data-level="lower" aria-hidden="true"></span>Pastroq</span><span style="display:inline-flex;align-items:center;gap:var(--fx-space-2)"><span class="fx-prio" data-variant="mark" data-level="low" aria-hidden="true"></span>Past</span><span style="display:inline-flex;align-items:center;gap:var(--fx-space-2)"><span class="fx-prio" data-variant="mark" data-level="minor" aria-hidden="true"></span>Kiçik</span><span style="display:inline-flex;align-items:center;gap:var(--fx-space-2)"><span class="fx-prio" data-variant="mark" data-level="high" aria-hidden="true"></span>Yuqori</span><span style="display:inline-flex;align-items:center;gap:var(--fx-space-2)"><span class="fx-prio" data-variant="mark" data-level="higher" aria-hidden="true"></span>Yuqoriroq</span><span style="display:inline-flex;align-items:center;gap:var(--fx-space-2)"><span class="fx-prio" data-variant="mark" data-level="highest" aria-hidden="true"></span>Eng yuqori</span><span style="display:inline-flex;align-items:center;gap:var(--fx-space-2)"><span class="fx-prio" data-variant="mark" data-level="critical" aria-hidden="true"></span>Jiddiy</span><span style="display:inline-flex;align-items:center;gap:var(--fx-space-2)"><span class="fx-prio" data-variant="mark" data-level="blocker" aria-hidden="true"></span>Tösiq</span></div> <div style="inline-size:100%;display:flex;flex-wrap:wrap;gap:var(--fx-space-2)"><span class="fx-prio-tag" data-level="urgent">1 · Şoşilinç</span><span class="fx-prio-tag" data-level="high">2 · Yuqori</span><span class="fx-prio-tag" data-level="normal">3 · Oddiy</span><span class="fx-prio-tag" data-level="low">4 · Past</span></div>
Tokenlar: --fx-bg-error-subtle --fx-bg-info-subtle --fx-bg-muted --fx-bg-surface --fx-bg-warning-subtle --fx-border-width-default --fx-control-h-sm --fx-fg-error --fx-fg-info --fx-fg-warning --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-radius-badge --fx-radius-circle --fx-radius-pill --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-6 --fx-text-primary --fx-text-secondary --fx-text-tertiary