Holat va javob · molecule
Toast
Qisqa xabar: teskari yuza, faqat sönadi. Ixtiyoriy bitta amal. Holat — data-tone success/warning/error/loading (nuqta/aylana + matndagi söz). Ikki usul: (1) popover="manual" — bitta toast, showPopover(); (2) toaster hududi + window.fxToast() — andoza bitta toast, ixtiyoriy ustma-ust yiğiş (data-stack), promise (yuklanmoqda → tayyor/xato), hoverda pauza, taymer çiziği (data-timer), siljitib yopiş (data-swipe).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-tone | successwarningerrorloading promise: yuklanmoqda | — |
data-placement | bottom-endtoptop-end | bottom |
data-stack | on toaster'da: ustma-ust yiğiladi, hoverda yoyiladi | — |
data-timer | on toaster'da: qolgan vaqt çiziği | — |
data-swipe | on toaster'da: yon tomonga siljitib yopiş | — |
Anatomiya
- root
.fx-toastşart - action
.fx-toast__actionixtiyoriy - toaster
.fx-toasterixtiyoriy - text
.fx-toast__textixtiyoriy - timer
.fx-toast__timerixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Amal tugmasiga; fokusda taymer töxtaydi |
| Esc | Hududdagi toastlarni yopadi |
Hudud role="region" aria-live="polite"; xato toast role="alert". Hover va fokusda taymer töxtaydi (amalga klaviaturada yetiş uçun); Esc hammasini yopadi. Amalsiz toast uçun siljitiş şart emas — baribir sönadi.
Naqş: WAI-ARIA APG alert · rol status
Kod
AI uçun: qaçon işlatiladi
- Amal natijasi haqida qisqa xabar.
- Promise natijasi: yuklanmoqda → tayyor/xato (fxToast.promise).
- Forma xatosi →
input - Javob talab qiladigan savol →
dialog - Xatoni faqat toastda bildirmang — forma xatosi maydon yonida turadi.
- Andozada bir vaqtda bitta toast; ustma-ust yiğiş (data-stack) faqat tez-tez natija beradigan ilovada (CRM, tahrirlovçi) yoqiladi. Bir toastda bittadan ortiq amal bölmasin.
- Siljitib yopiş (data-swipe) va stack — ixtiyoriy; marketing saytda faqat sönadigan bitta toast.
- Amal tugmali toast kamida 8 soniya turadi — undan qisqa qilmang.
npx foxui add toast
<div class="fx-toast" id="t1" popover="manual" role="status" data-tone="success">
Saqlandi
<button class="fx-toast__action" type="button">Qaytariş</button>
</div>
<button class="fx-btn" popovertarget="t1" popovertargetaction="show">Körsatiş</button>
<div class="fx-toaster" data-fx-toaster data-timer data-placement="bottom-end"></div>
<button class="fx-btn" onclick="fxToast({text:'Ariza saqlandi', tone:'success', action:{label:'Qaytarish'}})">Toast çiqariş</button>
<button class="fx-btn" onclick="fxToast.promise(new Promise(r=>setTimeout(r,1500)),{loading:'Yuborilmoqda…',success:'Yuborildi',error:'Yuborib bölmadi'})">Promise</button>Tokenlar: --fx-bg-page --fx-border-width-focus --fx-duration-pulse --fx-duration-spin --fx-ease-enter --fx-ease-exit --fx-ease-standard --fx-fg-error --fx-fg-success --fx-fg-warning --fx-font-size-sm --fx-font-weight-semibold --fx-motion-base --fx-motion-exit-base --fx-motion-shift-md --fx-radius-circle --fx-radius-control --fx-shadow-lg --fx-size-icon-sm --fx-size-status-dot-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-primary --fx-toast-width