Karkas · molecule
Vidjet
Dashboard idişi: taşqi qobiq ikkinçi darajali fonda — sarlavha, izoh, amallar (davr, menyu) va legenda (data-role — grafik seriya rollari: brand, ink, accent; sarlavhada legenda bölsa grafikning öz legendasi yaşiriladi); içida kötarilgan yuza — grafik, jadval, KPI qatori (.fx-widget__kpis) yoki röyxat; pastda izoh va havola. Ikki qavat sarlavhani mazmundan ajratadi — sahifada önlab vidjet tursa ham tartibli. Içki burçak taşqidan qobiq qalinligiça kiçik (konsentrik). data-flush — jadval yuza çetigaça; data-variant="plain" — qobiqsiz; aria-busy — yuklaniş (heroui.pro Widget'dan ilhom, kalibr — FoxUI).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | plain | shell |
data-flush | true | — |
Anatomiya
- root
.fx-widgetşart - head
.fx-widget__headixtiyoriy - title
.fx-widget__titleixtiyoriy - desc
.fx-widget__descixtiyoriy - actions
.fx-widget__actionsixtiyoriy - legend
.fx-widget__legendixtiyoriy - body
.fx-widget__bodyşart - kpis
.fx-widget__kpisixtiyoriy - foot
.fx-widget__footixtiyoriy
Holatlar
loading
Klaviatura va kiriş
<section aria-labelledby> — sarlavha bilan nomlangan hudud; legendada rang yonida nom yozilgan; yuklanişda aria-busy="true".
Kod
AI uçun: qaçon işlatiladi
Işlating
- Dashboard va hisobot sahifalari: grafik, KPI qatori, qisqa jadval yoki röyxat sarlavha bilan.
- Bir xil körinişdagi köp blokli panel (analitika, admin boş sahifasi).
Işlatmang
npx foxui add widget
<div style="display:grid;inline-size:100%;gap:var(--fx-space-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))">
<section class="fx-widget" aria-labelledby="w1">
<header class="fx-widget__head"><div><h3 class="fx-widget__title" id="w1">Tokenlar sarfi</h3><p class="fx-widget__desc">Oxirgi 30 kun</p></div><ul class="fx-widget__legend"><li data-role="ink">Kiruvçi</li><li>Çiquvçi</li></ul></header>
<div class="fx-widget__body"><figure class="fx-chart" data-fx-chart data-type="line" data-height="180"><figcaption class="fx-sr-only">Tokenlar sarfi, ming</figcaption><table class="fx-chart__data"><thead><tr><th>Kun</th><th>Kiruvçi</th><th>Çiquvçi</th></tr></thead><tbody><tr><th>1-okt</th><td>120</td><td>80</td></tr><tr><th>5-okt</th><td>160</td><td>95</td></tr><tr><th>10-okt</th><td>140</td><td>110</td></tr><tr><th>15-okt</th><td>210</td><td>130</td></tr><tr><th>20-okt</th><td>190</td><td>150</td></tr><tr><th>25-okt</th><td>240</td><td>170</td></tr><tr><th>30-okt</th><td>260</td><td>160</td></tr></tbody></table></figure></div>
</section>
<section class="fx-widget" aria-labelledby="w2">
<header class="fx-widget__head"><div><h3 class="fx-widget__title" id="w2">Asosiy körsatkiçlar</h3><p class="fx-widget__desc">Oktyabr</p></div><div class="fx-widget__actions"><div class="fx-segment" role="group" aria-label="Davr" data-size="sm"><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-widget__body"><div class="fx-widget__kpis">
<div class="fx-stat"><div class="fx-stat__head"><span class="fx-stat__label">Tuşum</span><span class="fx-delta" data-variant="chip" data-dir="up" data-tone="good">+3,3%</span></div><span class="fx-stat__value">228 mln</span><figure class="fx-chart" data-fx-chart data-type="spark" data-no-table data-height="40"><figcaption class="fx-sr-only">Dinamika</figcaption><table class="fx-chart__data"><thead><tr><th>Kun</th><th>Qiymat</th></tr></thead><tbody><tr><th>1</th><td>5</td></tr><tr><th>2</th><td>7</td></tr><tr><th>3</th><td>6</td></tr><tr><th>4</th><td>9</td></tr><tr><th>5</th><td>8</td></tr><tr><th>6</th><td>12</td></tr><tr><th>7</th><td>14</td></tr></tbody></table></figure></div>
<div class="fx-stat"><div class="fx-stat__head"><span class="fx-stat__label">Rad etilgan</span><span class="fx-delta" data-variant="chip" data-dir="down" data-tone="bad">−5,9%</span></div><span class="fx-stat__value">42,3%</span><figure class="fx-chart" data-fx-chart data-type="spark" data-no-table data-height="40"><figcaption class="fx-sr-only">Dinamika</figcaption><table class="fx-chart__data"><thead><tr><th>Kun</th><th>Qiymat</th></tr></thead><tbody><tr><th>1</th><td>9</td></tr><tr><th>2</th><td>8</td></tr><tr><th>3</th><td>9</td></tr><tr><th>4</th><td>7</td></tr><tr><th>5</th><td>8</td></tr><tr><th>6</th><td>6</td></tr><tr><th>7</th><td>6</td></tr></tbody></table></figure></div>
<div class="fx-stat"><div class="fx-stat__head"><span class="fx-stat__label">Faol mijoz</span><span class="fx-delta" data-variant="chip" data-dir="up" data-tone="good">+10,8%</span></div><span class="fx-stat__value">980</span><figure class="fx-chart" data-fx-chart data-type="spark" data-no-table data-height="40"><figcaption class="fx-sr-only">Dinamika</figcaption><table class="fx-chart__data"><thead><tr><th>Kun</th><th>Qiymat</th></tr></thead><tbody><tr><th>1</th><td>4</td></tr><tr><th>2</th><td>5</td></tr><tr><th>3</th><td>5</td></tr><tr><th>4</th><td>7</td></tr><tr><th>5</th><td>8</td></tr><tr><th>6</th><td>8</td></tr><tr><th>7</th><td>10</td></tr></tbody></table></figure></div>
</div></div>
<footer class="fx-widget__foot"><span>Yangilandi: bugun 09:40</span><a href="#">Hisobot</a></footer>
</section>
<section class="fx-widget" aria-labelledby="w3">
<header class="fx-widget__head"><div><h3 class="fx-widget__title" id="w3">Jamoa</h3></div><span class="fx-badge">4 a'zo</span></header>
<div class="fx-widget__body" data-flush><table class="fx-table" data-density="compact"><thead><tr><th scope="col">Ism</th><th scope="col">Rol</th><th scope="col">Holat</th></tr></thead><tbody><tr><td>Aziz Karimov</td><td>Rahbar</td><td><span class="fx-badge" data-tone="success" data-marker="dot">Faol</span></td></tr><tr><td>Dilnoza Rahimova</td><td>Dizayner</td><td><span class="fx-badge" data-tone="success" data-marker="dot">Faol</span></td></tr><tr><td>Sardor Aliyev</td><td>Dasturçi</td><td><span class="fx-badge" data-tone="warning" data-marker="dot">Ta'tilda</span></td></tr></tbody></table></div>
</section>
<section class="fx-widget" aria-labelledby="w4" aria-busy="true"><header class="fx-widget__head"><h3 class="fx-widget__title" id="w4">Yuklanmoqda…</h3></header><div class="fx-widget__body"></div></section>
</div>Tokenlar: --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-surface --fx-border-width-default --fx-duration-pulse --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-radius-circle --fx-radius-control --fx-radius-overlay --fx-radius-surface --fx-shadow-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-primary --fx-text-secondary --fx-text-tertiary --fx-viz-accent --fx-viz-brand --fx-viz-ink
Ş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).