Ma'lumot · molecule
Ustunli röyxat
Har satrda nom, uluş çiziği va qiymat: eng köp trafik manbalari, şaharlar, mahsulotlar. Çiziq nom ortida (standart) yoki nom ostida ingiçka (track). Qiymat har doim matn bilan; uluş CSS özgaruvçisida (--fx-barlist-value) (#60).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | track | fill |
data-role | brandinkaccentriskcontext | brand |
Anatomiya
- root
.fx-barlistşart - item
.fx-barlist__itemşart - bar
.fx-barlist__barşart - label
.fx-barlist__labelşart - value
.fx-barlist__valueşart
Holatlar
hover
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Enter | Nom havola bölsa — ötadi |
Röyxat <ul> + aria-label; çiziq bezak (psevdo-element), ma'no — nom va qiymat matnida. Havola bölsa fokus halqasi.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Toifalar böyiça yetakçilarni taqqoslaş (top-N).
npx foxui add barlist
<ul class="fx-barlist" aria-label="Trafik manbalari"> <li class="fx-barlist__item" style="--fx-barlist-value: 100%"><div class="fx-barlist__bar"><a class="fx-barlist__label" href="#">Telegram</a></div><span class="fx-barlist__value">4 820</span></li> <li class="fx-barlist__item" style="--fx-barlist-value: 64%"><div class="fx-barlist__bar"><a class="fx-barlist__label" href="#">Qidiruv</a></div><span class="fx-barlist__value">3 090</span></li> <li class="fx-barlist__item" style="--fx-barlist-value: 38%"><div class="fx-barlist__bar"><a class="fx-barlist__label" href="#">Instagram</a></div><span class="fx-barlist__value">1 830</span></li> <li class="fx-barlist__item" style="--fx-barlist-value: 12%" data-role="context"><div class="fx-barlist__bar"><span class="fx-barlist__label">Boşqa</span></div><span class="fx-barlist__value">576</span></li> </ul> <ul class="fx-barlist" data-variant="track" aria-label="Viloyatlar böyiça buyurtmalar"> <li class="fx-barlist__item" style="--fx-barlist-value: 100%"><div class="fx-barlist__bar"><span class="fx-barlist__label">Toşkent</span></div><span class="fx-barlist__value">312</span></li> <li class="fx-barlist__item" style="--fx-barlist-value: 54%"><div class="fx-barlist__bar"><span class="fx-barlist__label">Samarqand</span></div><span class="fx-barlist__value">168</span></li> </ul>
Tokenlar: --fx-bg-surface --fx-border-color-focus --fx-border-width-focus --fx-control-h-sm --fx-ease-standard --fx-font-size-sm --fx-motion-slow --fx-radius-badge --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-primary --fx-text-secondary --fx-viz-accent --fx-viz-brand --fx-viz-context --fx-viz-ink --fx-viz-risk --fx-viz-track
Şu toifadan
API kalitlariAPI kalitlari boşqaruvi (naqş): «Yangi kalit» dialogi (nom, muddat, ruxsat) → kalit BIR MARTA körsatiladi (nusxalaş tugmasi va ogohlantiriş bilan) → röyxatda faqat prefiks qoladi.Audit jurnaliXavfsizlik va boşqaruv jurnali (4.191): «kim · nima · qaçon · qayerdan».Tarif va hisob-kitobTarif va hisob-kitob sahifasi (naqş): joriy reja (narx sömda, keyingi tölov sanasi, avtomatik uzaytiriş), foydalaniş meter'lari (çegara yaqin — ogohlantiriş), tölov usuli (karta turi, •••• 4417, muddat) va hisob-fakturalar jadvali (PDF).Doska (kanban)Holat ustunlari va kartalar.GrafikGrafik oilasi: ustun (guruh, ustma-ust), gorizontal ustun, çiziq (yakka seriyada sönuvçi maydon), mini-çiziq, donut (≤ 4 bölak), uluş çiziği, çiziqli ölçagiç va issiqlik xaritasi.Grafik kartasiGrafikni örab turuvçi karta: sarlavha + izoh + amallar (davr segmenti, menyu), grafik, pastda legenda va manba.