Karkas · pattern
Dashboard qolipi
Körsatkiçlar sahifasi qolipi (4.185): tepada sarlavha, yangilangan vaqt va davr tanlaş; KPI qatori (≤ 4, bitta hero raqam); 12 ustunli grafik kartalar töri (data-span: 4, 6, 8 yoki 12 — konteyner kengligiga qarab 2 yoki 1 ustunga tuşadi); pastda sönggi faollik. Içi mavjud komponentlardan: fx-stat, fx-chartcard, fx-chart, fx-table, fx-timeline.
Savdo
Yangilandi: bugun, 10:42Tuşum132 mln+8,2% 30 kunda
Yopilgan bitimlar48−4 30 kunda
Konversiya10,6 %+1,1 30 kunda
Tuşum oylar böyiça
mln söm| Oy | Tuşum |
|---|---|
| May | 86 |
| Iyun | 94 |
| Iyul | 90 |
| Avg | 108 |
| Sen | 121 |
| Okt | 132 |
Voronka
bitimlar · oktyabr| Bosqiç | Bitimlar |
|---|---|
| Lid | 452 |
| Taklif | 190 |
| Muzokara | 74 |
| Yutildi | 48 |
Sönggi faollik
Dilnoza Yusupova bitim №209 ni yopdi — 12 mln söm
09:58Yangi lid: «Bek Quriliş» MChJ
09:31
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-span | 46812 | 12 |
Anatomiya
- root
.fx-dashboardşart - head
.fx-dashboard__headşart - titles
.fx-dashboard__titlesixtiyoriy - title
.fx-dashboard__titleşart - updated
.fx-dashboard__updatedixtiyoriy - controls
.fx-dashboard__controlsixtiyoriy - kpis
.fx-dashboard__kpisixtiyoriy - grid
.fx-dashboard__gridşart - section-title
.fx-dashboard__section-titleixtiyoriy
Holatlar
busy
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Davr tanlaş, KPI, grafiklar (← → nuqtalar), faollik — tartib bilan |
Ildiz <section aria-labelledby> sarlavhaga; har karta öz sarlavhasi bilan (aria-labelledby); yangilanayotganda aria-busy="true". Grafiklar «Jadval» körinişi bilan (fx-chart).
Naqş: WAI-ARIA APG landmarks · rol region
Kod
AI uçun: qaçon işlatiladi
Işlating
- Bölim yoki biznesning asosiy körsatkiçlari bir sahifada: savdo, arizalar, moliya.
Işlatmang
- Yozuvlar röyxati va filtr →
listpage - Bitta yozuv tafsiloti →
recordpage - Birinçi ekranga 7 dan köp karta va bittadan köp hero raqam qöymang.
- Bitta dashboard'da 3 dan köp grafik turi işlatmang; har karta — bitta savol.
- Sarlavhada ma'lumot yangilangan vaqtini tuşirib qoldirmang.
- Karta içida içki aylantiriş qilmang — kartani kattalaştiring yoki «Hammasi» sahifasiga havola bering.
npx foxui add dashboard
<section class="fx-dashboard" aria-labelledby="db-t">
<header class="fx-dashboard__head">
<div class="fx-dashboard__titles"><h1 class="fx-dashboard__title" id="db-t">Savdo</h1><span class="fx-dashboard__updated">Yangilandi: bugun, 10:42</span></div>
<div class="fx-dashboard__controls"><div class="fx-segment" data-size="sm" role="group" aria-label="Davr"><button class="fx-segment__item" type="button" aria-pressed="false">7 kun</button><button class="fx-segment__item" type="button" aria-pressed="true">30 kun</button><button class="fx-segment__item" type="button" aria-pressed="false">Yil</button></div></div>
</header>
<div class="fx-dashboard__kpis">
<div class="fx-stat" data-size="hero"><span class="fx-stat__label">Tuşum</span><span class="fx-stat__value">132 mln</span><span class="fx-delta" data-dir="up" data-tone="good">+8,2% <span class="fx-delta__period">30 kunda</span></span></div>
<div class="fx-stat"><span class="fx-stat__label">Yopilgan bitimlar</span><span class="fx-stat__value">48</span><span class="fx-delta" data-dir="down" data-tone="bad">−4 <span class="fx-delta__period">30 kunda</span></span></div>
<div class="fx-stat"><span class="fx-stat__label">Konversiya</span><span class="fx-stat__value">10,6 %</span><span class="fx-delta" data-dir="up" data-tone="good">+1,1 <span class="fx-delta__period">30 kunda</span></span></div>
</div>
<div class="fx-dashboard__grid">
<section class="fx-chartcard" data-span="8" aria-labelledby="db-c1"><div class="fx-chartcard__head"><div class="fx-chartcard__titles"><h3 class="fx-chartcard__title" id="db-c1">Tuşum oylar böyiça</h3><span class="fx-chartcard__sub">mln söm</span></div></div>
<div class="fx-chartcard__body"><figure class="fx-chart" data-fx-chart data-type="bar" data-unit="mln söm" data-ref="120:Reja"><figcaption class="fx-sr-only">Tuşum oylar böyiça</figcaption><table class="fx-chart__data"><thead><tr><th>Oy</th><th>Tuşum</th></tr></thead><tbody><tr><th>May</th><td>86</td></tr><tr><th>Iyun</th><td>94</td></tr><tr><th>Iyul</th><td>90</td></tr><tr><th>Avg</th><td>108</td></tr><tr><th>Sen</th><td>121</td></tr><tr><th>Okt</th><td data-role="accent">132</td></tr></tbody></table></figure></div></section>
<section class="fx-chartcard" data-span="4" aria-labelledby="db-c2"><div class="fx-chartcard__head"><div class="fx-chartcard__titles"><h3 class="fx-chartcard__title" id="db-c2">Voronka</h3><span class="fx-chartcard__sub">bitimlar · oktyabr</span></div></div>
<div class="fx-chartcard__body"><figure class="fx-chart" data-fx-chart data-type="funnel"><figcaption class="fx-sr-only">Savdo voronkasi</figcaption><table class="fx-chart__data"><thead><tr><th>Bosqiç</th><th>Bitimlar</th></tr></thead><tbody><tr><th>Lid</th><td>452</td></tr><tr><th>Taklif</th><td>190</td></tr><tr><th>Muzokara</th><td>74</td></tr><tr><th>Yutildi</th><td>48</td></tr></tbody></table></figure></div></section>
<h2 class="fx-dashboard__section-title">Sönggi faollik</h2>
<section class="fx-card" data-span="12"><ol class="fx-timeline"><li class="fx-timeline__item"><span class="fx-timeline__marker"></span><div class="fx-timeline__content"><p class="fx-timeline__title">Dilnoza Yusupova bitim №209 ni yopdi — 12 mln söm</p><span class="fx-timeline__time">09:58</span></div></li><li class="fx-timeline__item"><span class="fx-timeline__marker"></span><div class="fx-timeline__content"><p class="fx-timeline__title">Yangi lid: «Bek Quriliş» MChJ</p><span class="fx-timeline__time">09:31</span></div></li></ol></section>
</div>
</section>Tokenlar: --fx-ease-standard --fx-font-adjust-display --fx-font-family-display --fx-font-size-display-sm --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-motion-fast --fx-popover-width --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-text-secondary --fx-text-tertiary
Şu toifadan
AkkordeonYiğiladigan bölimlar: native <details>; bir xil name bilan bittasi oçiq qoladi.Maqola sahifasiBlog maqolasi sahifasi (4.178): tepada ortga havola va toifa, sarlavha, lid, muallif qatori (avatar, ism, sana, öqiş vaqti) va muqova; ostida uç ustun — çapda yopişqoq ulaşiş tugmalari (Telegram, Facebook, X, havolani nusxalaş — data-fx-copy), markazda matn (fx-prose, 68 belgi kenglik), öngda mundarija (fx-toc — öqilayotgan bölimni belgilaydi).Kiriş sahifasiKiriş / röyxatdan ötiş sahifasi qolipi: markazda karta yoki çapda forma + öngda brend paneli (split).Bento törLanding xususiyatlarini turli ölçamdagi kataklar mozaikasida körsatiş (4.72): data-span bilan 2×1, 1×2, 2×2 va 3×1 kataklar, böş joylar avtomatik töldiriladi (dense).Bleed (manfiy çet)Içki elementni ota konteyner içki çetidan (padding) çiqarib, töliq enga yoyadi (4.19): karta içidagi jadval, rasm, ajratuvçi.Blog röyxatiBlog boş sahifasi yoki bölimi (4.178): sarlavha, toifa filtri (fx-chip), ixtiyoriy «Tanlangan» katta maqola (data-featured — töliq kenglikda, rasm yonida), kartalar töri va sahifalaş (fx-pagination).