Holat va javob · molecule
Skelet (karkas)
Yuklanayotgan ma'lumot örnida kulrang şakllar (karkas): qator (standart), sarlavha, doira, blok, kvadrat, rasm, tugma; kompozitlar — .fx-skeleton-group (paragraf), .fx-skeleton-row (avatar+qatorlar; data-type=table, data-cols), .fx-skeleton-card. 24.10: 300 ms qoidasi — kontent şu vaqt içida kelsa skelet umuman körinmaydi (CSS, JS'siz; data-delay="0" — darhol); yaltiraş (data-anim="shimmer") faqat transform bilan, butun guruhga ham beriladi; .fx-skeleton-zone — skelet va kontent bitta katakda, aria-busy almaşganda joy siljimaydi. Jonli namuna: /namuna/karkas/.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-shape | linetitlecircleblocksquareimagebutton | line |
data-anim | pulseshimmer yoruğlik tasmasi ötadi (transform, GPU); guruh, karta yoki zonaga ham beriladi | pulse |
data-delay | 0 24.10 — darhol (faqat namuna sahifasi); standart — --fx-duration-delay-skeleton | 300ms |
Anatomiya
- root
.fx-skeletonşart - group
.fx-skeleton-groupixtiyoriy - row
.fx-skeleton-rowixtiyoriy - card
.fx-skeleton-cardixtiyoriy - zone
.fx-skeleton-zoneixtiyoriy - fallback
.fx-skeleton-zone__fallbackixtiyoriy - content
.fx-skeleton-zone__contentixtiyoriy
Holatlar
Klaviatura va kiriş
Konteynerda aria-busy="true" va aria-label; tugagaç "false" yoki olib taşlang. Şakllar aria-hidden.
Kod
AI uçun: qaçon işlatiladi
- Sahifa yoki blok tuzilmasi ma'lum, ma'lumot hali kelmagan.
- Tugma içidagi kutiş →
button - Tuzilmasi noma'lum kutiş →
spinner - Skelet keçikişini olib taşlamang (data-delay="0" faqat namuna sahifasida) — 300 ms dan qisqa yuklanişda lipillaydi.
- Skelet öliçami kontentnikidan farq qilmasin — almaşganda sahifa siljiydi (CLS).
- Butun sahifaga bitta spinner örniga skelet qöying, lekin tuzilmasi noma'lum kutişga — spinner.
npx foxui add skeleton
<!-- Karta röyxati: guruhga data-anim="shimmer" — hamma şakl yaltiraydi --> <div class="fx-skeleton-card" data-anim="shimmer" aria-hidden="true" style="max-width:320px"><span class="fx-skeleton" data-shape="image"></span><span class="fx-skeleton" data-shape="title"></span><div class="fx-skeleton-group"><span class="fx-skeleton"></span><span class="fx-skeleton"></span></div></div> <!-- Profil: avatar + qatorlar --> <div class="fx-skeleton-row" data-anim="shimmer" aria-hidden="true"><span class="fx-skeleton" data-shape="circle"></span><div class="fx-skeleton-group"><span class="fx-skeleton" data-shape="title"></span><span class="fx-skeleton"></span></div></div> <!-- Jadval qatorlari --> <div data-anim="shimmer" aria-hidden="true"><div class="fx-skeleton-row" data-type="table"><span class="fx-skeleton"></span><span class="fx-skeleton"></span><span class="fx-skeleton"></span><span class="fx-skeleton"></span></div><div class="fx-skeleton-row" data-type="table"><span class="fx-skeleton"></span><span class="fx-skeleton"></span><span class="fx-skeleton"></span><span class="fx-skeleton"></span></div></div> <!-- Zona: kontent kelguncha skelet (300 ms dan keyin), keyin joy siljimasdan almaşadi. JS faqat aria-busy'ni "false" qiladi --> <div class="fx-skeleton-zone" aria-busy="true" aria-label="Mijozlar"> <div class="fx-skeleton-zone__fallback" data-anim="shimmer" aria-hidden="true"><div class="fx-skeleton-group"><span class="fx-skeleton" data-shape="title"></span><span class="fx-skeleton"></span><span class="fx-skeleton"></span></div></div> <div class="fx-skeleton-zone__content">…kelgan kontent…</div> </div>
Tokenlar: --fx-bg-muted --fx-bg-surface --fx-border-color-default --fx-border-color-surface --fx-border-width-default --fx-control-h-md --fx-duration-base --fx-duration-delay-skeleton --fx-duration-instant --fx-duration-pulse --fx-duration-shimmer --fx-ease-standard --fx-font-size-sm --fx-font-size-xl --fx-radius-avatar-ratio --fx-radius-badge --fx-radius-circle --fx-radius-control --fx-radius-surface --fx-size-avatar-md --fx-skeleton-delay --fx-skeleton-kech --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5