Körsatiş · primitive
Sarlavha
Sarlavha uslubi: display, h1–h4 vizual darajalari. Vizual daraja semantik tegga boğliq emas — <h2 data-size="h4"> mumkin. Ohang, vazn, qisqartiriş.
Mijozlar bazasi
Bugungi arizalar
Keça (semantik h2, vizual h4)
Juda uzun sarlavha bir qatorga qisqartiriladi
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | displayh1h2h3h4 | h2 |
data-tone | secondarybrand | primary |
data-weight | regularmedium | semibold |
data-clamp | 23 | none |
Anatomiya
- root
.fx-headingşart
Klaviatura va kiriş
Semantik daraja mazmun tuzilmasiga mos: sahifada bitta h1, darajalar taşlab ketilmaydi.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Sahifa, bölim va karta sarlavhalari.
Işlatmang
- Oddiy matn yoki izoh →
text - Sahifa boşi (sarlavha + amallar) →
page-header - Tegni vizual ölçam uçun tanlamang: h1’dan h4’ga sakramang, darajani saqlang va data-size bilan kiçraytiring.
- Sarlavha örniga qalin <p> yozmang.
npx foxui add heading
<h1 class="fx-heading" data-size="display">Mijozlar bazasi</h1> <h2 class="fx-heading" data-size="h2">Bugungi arizalar</h2> <h2 class="fx-heading" data-size="h4" data-tone="secondary">Keça (semantik h2, vizual h4)</h2> <h3 class="fx-heading" data-size="h3" data-truncate style="max-inline-size:16rem">Juda uzun sarlavha bir qatorga qisqartiriladi</h3>
Tokenlar: --fx-font-adjust-display --fx-font-family-display --fx-font-size-display-md --fx-font-size-display-sm --fx-font-size-lg --fx-font-size-md --fx-font-size-xl --fx-font-weight-medium --fx-font-weight-regular --fx-font-weight-semibold --fx-text-brand --fx-text-primary --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.