Holat va javob · molecule
Böş holat
Röyxat yoki jadvalda hali heç narsa yöq, qidiruv topmadi yoki yuklaşda xato: belgi, sarlavha, bitta qator izoh va keyingi qadam. Kengaytma: data-state=first|search|forbidden (xato bilan 4 tayyor holat), .fx-empty__art[data-size=sm|lg|illustration], .fx-empty__link.
Yuklab bölmadi
Internetni tekşirib, qayta urinib köring.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | emptyerrorfirstsearchforbidden | empty |
data-size | defaultcompact | default |
Anatomiya
- root
.fx-emptyşart - art
.fx-empty__artixtiyoriy - title
.fx-empty__titleşart - text
.fx-empty__textixtiyoriy - actions
.fx-empty__actionsixtiyoriy - link
.fx-empty__linkixtiyoriy
Klaviatura va kiriş
Belgi aria-hidden; sarlavha matnli.
Kod
AI uçun: qaçon işlatiladi
- Böş röyxat, topilmagan qidiruv, yuklaş xatosi.
- Ma'lumot yuklanmoqda →
skeleton - «Ma'lumot yöq» deb töxtamang — keyingi qadamni ayting.
npx foxui add empty
<div class="fx-empty"> <div class="fx-empty__art" aria-hidden="true">∅</div> <p class="fx-empty__title">Hali ariza yöq</p> <p class="fx-empty__text">Saytdagi forma orqali kelgan arizalar şu yerda körinadi.</p> <div class="fx-empty__actions"><a class="fx-btn" href="#">Formani oçiş</a></div> </div> <div class="fx-empty" data-state="error" data-size="compact"> <div class="fx-empty__art" aria-hidden="true">!</div> <p class="fx-empty__title">Yuklab bölmadi</p> <p class="fx-empty__text">Internetni tekşirib, qayta urinib köring.</p> <div class="fx-empty__actions"><button class="fx-btn" data-size="sm">Qayta uriniş</button></div> </div> <div class="fx-empty" data-state="search"><div class="fx-empty__art" data-size="lg" aria-hidden="true">?</div><h3 class="fx-empty__title">Heç narsa topilmadi</h3><p class="fx-empty__text">Boşqa söz bilan qidiring.</p><a class="fx-empty__link" href="#">Filtrlarni tozalaş</a></div>
Tokenlar: --fx-bg-brand-subtle --fx-bg-error-subtle --fx-bg-muted --fx-bg-warning-subtle --fx-border-color-focus --fx-border-width-focus --fx-fg-error --fx-fg-warning --fx-font-size-md --fx-font-size-sm --fx-font-weight-semibold --fx-radius-badge --fx-radius-surface --fx-size-icon-lg --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary