Körsatiş · pattern
Raqamlar bölimi
Landing va «Biz haqimizda» sahifasi uçun raqamlar bölimi (4.176): ixtiyoriy sarlavha bloki va 3–4 ta katta raqam — har birida izoh va qisqa tuşuntiriş. Raqam fx-ticker bilan köriniş maydoniga kirganda aylanib çiqadi (JS bölmasa — oddiy matn, harakat kamaytirilsa — darhol). Tuzilma — <dl>: ekran öquvçi «izoh — raqam» juftini öqiydi, vizual tartibda raqam tepada. data-layout: row (standart) yoki split (sarlavha çapda, raqamlar 2×2). data-variant: plain, divided (ustunlar orasida çiziq), cards (har raqam kartada). Birlik (+, %, mln) .fx-stats__unit içida — kiçikroq va brend rangida.
Raqamlarda
Özbek jamoalari FoxUI bilan tezroq quradi
2026-yil oktabr holatiga köra, obunaçilar sörovnomasi va paket statistikasi.
- Tayyor komponent
- 232
- Tugmadan CRM sahifasigaça — hammasi tokenlarda.
- Faol jamoa
- 1 480
- Toşkent, Samarqand va Farğonadagi studiyalar.
- Tezroq işga tuşiriş
- 3,4×
- Birinçi sahifadan relizgaça, örtaça.
- Tejalgan mablağ
- 86mln söm
- Bir loyihada dizayn va front-end xarajati.
Manba: FoxUI obunaçilari sörovnomasi, 412 ta javob.
«Ipak Yöli Savdo» bir yilda
Onlayn dökon yangi dizayn tizimiga ötgandan keyingi natijalar.
- Konversiya
- 42%
- Savatdan tölovgaça ösiş.
- Buyurtmalar
- 18 600
- Oyiga, Toşkent böylab.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-layout | row bir qatordasplit sarlavha çapda, raqamlar 2×2 | row |
data-variant | plaindivided ustunlar orasida çiziqcards har raqam kartada | plain |
Anatomiya
- root
.fx-statsşart - head
.fx-stats__headixtiyoriy - eyebrow
.fx-stats__eyebrowixtiyoriy - title
.fx-stats__titleixtiyoriy - text
.fx-stats__textixtiyoriy - list (dl)
.fx-stats__listşart - item
.fx-stats__itemşart - label (dt)
.fx-stats__labelşart - value (dd, içida fx-ticker)
.fx-stats__valueşart - unit
.fx-stats__unitixtiyoriy - note
.fx-stats__noteixtiyoriy - foot (manba)
.fx-stats__footixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Fokuslanadigan element yöq — bölim faqat öqiladi |
Tuzilma <dl>: <dt> — izoh, <dd> — raqam va tuşuntiriş; ekran öquvçi juftlikni töğri öqiydi, vizual tartib CSS order bilan. Ticker lentalari aria-hidden, yakuniy qiymat öqiladi. Bezak birlik («+») aria-hidden, ma'noli birlik (%, mln söm) öqiladi. <section aria-labelledby> + h2.
Kod
AI uçun: qaçon işlatiladi
- Landingda işonç uçun: mijozlar soni, natija, tezlik.
- «Biz haqimizda» va keys sahifasida natijalar.
- Dashboard'dagi jonli KPI (özgariş, sparkline bilan) →
stat - Ixçam körsatkiçlar qatori ilova içida →
statstrip - 5 tadan ortiq raqam qöymang — eng kuçli 3–4 tasini tanlang.
- Manbasiz yoki yaxlitlanmagan «aniq» raqam bermang (1 483 217 emas — 1 480+); raqam ostida qayerdan olingani tursin.
- Birlikni raqam içiga yozmang — .fx-stats__unit da alohida (ticker faqat raqamni aylantiradi).
- Bitta raqam uçun bu naqşni işlatmang — fx-stat yoki matn içida.
npx foxui add stats
<section class="fx-stats" data-variant="divided" aria-labelledby="st-t">
<header class="fx-stats__head"><p class="fx-stats__eyebrow">Raqamlarda</p><h2 class="fx-stats__title" id="st-t">Özbek jamoalari FoxUI bilan tezroq quradi</h2><p class="fx-stats__text">2026-yil oktabr holatiga köra, obunaçilar sörovnomasi va paket statistikasi.</p></header>
<dl class="fx-stats__list">
<div class="fx-stats__item"><dt class="fx-stats__label">Tayyor komponent</dt><dd class="fx-stats__value"><span class="fx-ticker" data-fx-ticker data-value="232">232</span></dd><dd class="fx-stats__note">Tugmadan CRM sahifasigaça — hammasi tokenlarda.</dd></div>
<div class="fx-stats__item"><dt class="fx-stats__label">Faol jamoa</dt><dd class="fx-stats__value"><span class="fx-ticker" data-fx-ticker data-value="1480">1 480</span><span class="fx-stats__unit" aria-hidden="true">+</span></dd><dd class="fx-stats__note">Toşkent, Samarqand va Farğonadagi studiyalar.</dd></div>
<div class="fx-stats__item"><dt class="fx-stats__label">Tezroq işga tuşiriş</dt><dd class="fx-stats__value"><span class="fx-ticker" data-fx-ticker data-value="3.4" data-decimals="1">3,4</span><span class="fx-stats__unit">×</span></dd><dd class="fx-stats__note">Birinçi sahifadan relizgaça, örtaça.</dd></div>
<div class="fx-stats__item"><dt class="fx-stats__label">Tejalgan mablağ</dt><dd class="fx-stats__value"><span class="fx-ticker" data-fx-ticker data-value="86">86</span><span class="fx-stats__unit">mln söm</span></dd><dd class="fx-stats__note">Bir loyihada dizayn va front-end xarajati.</dd></div>
</dl>
<p class="fx-stats__foot">Manba: FoxUI obunaçilari sörovnomasi, 412 ta javob.</p>
</section>
<section class="fx-stats" data-layout="split" data-variant="cards" aria-labelledby="st-t2" style="margin-block-start: var(--fx-space-12)">
<header class="fx-stats__head"><h2 class="fx-stats__title" id="st-t2">«Ipak Yöli Savdo» bir yilda</h2><p class="fx-stats__text">Onlayn dökon yangi dizayn tizimiga ötgandan keyingi natijalar.</p></header>
<dl class="fx-stats__list">
<div class="fx-stats__item"><dt class="fx-stats__label">Konversiya</dt><dd class="fx-stats__value"><span class="fx-ticker" data-fx-ticker data-value="42">42</span><span class="fx-stats__unit">%</span></dd><dd class="fx-stats__note">Savatdan tölovgaça ösiş.</dd></div>
<div class="fx-stats__item"><dt class="fx-stats__label">Buyurtmalar</dt><dd class="fx-stats__value"><span class="fx-ticker" data-fx-ticker data-value="18600">18 600</span></dd><dd class="fx-stats__note">Oyiga, Toşkent böylab.</dd></div>
</dl>
</section>Tokenlar: --fx-bg-surface --fx-border-color-default --fx-border-color-surface --fx-border-width-default --fx-dialog-width --fx-font-adjust-display --fx-font-adjust-numeric --fx-font-family-display --fx-font-family-numeric --fx-font-size-display-lg --fx-font-size-display-sm --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-line-height-tight --fx-radius-surface --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary