Körsatiş · molecule
Son belgisi
Ikon yoki tugma ustidagi kiçik son (öqilmagan xabarlar) yoki nuqta. Ota elementga position: relative kerak. Kengaytma: data-inline (ota elementsiz, oqim ichida), data-tone=neutral|brand|success.
12
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-shape | numberdot | number |
data-inline | true | — |
data-tone | neutralbrandsuccess | — |
Anatomiya
- root
.fx-countşart
Holatlar
bump
Klaviatura va kiriş
Son ota elementning aria-label'ida söz bilan; belgining özi aria-hidden.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Ikon ustida yangi narsalar soni yoki borligi.
Işlatmang
- Matn yonidagi son (filtr, tab) →
badge - 99 dan katta sonni töliq yozmang — «99+».
npx foxui add count
<button class="fx-btn" data-shape="icon" aria-label="Xabarlar, 3 ta yangi" style="position: relative">✉<span class="fx-count" aria-hidden="true">3</span></button> <button class="fx-btn" data-shape="icon" aria-label="Bildirişnomalar, yangisi bor" style="position: relative">◔<span class="fx-count" data-shape="dot" aria-hidden="true"></span></button> <span class="fx-count" data-inline data-tone="neutral">12</span>
Tokenlar: --fx-bg-brand-solid --fx-bg-error-solid --fx-bg-muted --fx-bg-surface --fx-border-width-focus --fx-ease-spring --fx-fg-success --fx-font-size-xs --fx-font-weight-semibold --fx-motion-slow --fx-radius-circle --fx-size-icon-md --fx-size-status-dot --fx-space-1 --fx-text-on-brand --fx-text-on-error --fx-text-secondary
Şu toifadan
Nişon kartasiYutuq nişoni: belgi (emoji yoki ikon) + nom + sabab.BiriktirmaFayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği.Audio pleyerIxçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×).AvatarKvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle).Belgi (badge)Holat yoki toifa yorliği.Boğlovçi nurIntegratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi.