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 ○.

beta0.22.0 dan.fx-prioFaqat CSS
AhamiyatsizEng pastPastroqPastKiçikYuqoriYuqoriroqEng yuqoriJiddiyTösiq
1 · Şoşilinç2 · Yuqori3 · Oddiy4 · Past

Variantlar

AtributQiymatlarStandart
data-level0
1
2
3
urgent
trivial 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-sizemd
lg
md
data-variantbars 3 ustunça (standart)
mark Jira kabi belgilar — data-level: trivial…blocker
bars

Anatomiya

  1. root.fx-prioşart
  2. 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
Işlating
  • Vazifa, murojaat, xato röyxatlarida ustuvorlik.
Işlatmang
  • 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

Şu toifadan

Libosni sozlangButun sayt şu zahoti kiyinadi

Libos

Premium liboslar — obunada: bepul 3 ta ustiga yana 13 ta. Bu yerda hammasini sinab körasiz. Narxlar

Brendlar ilhomida · 11

Faqat uslub ilhomi; belgilar — Simple Icons (CC0) va logobank.uz (Uzum), savdo belgilari egalariga tegişli.

Rejim
Qölda sozlaş — dasturçilar uçun

Rang

Şakl va çegara

Şrift juftligi

Qölda tanlaş

Qulaylik

Harakat
Ziçlik
Material (tajriba)