Holat va javob · molecule
Teskari sanoq
Qolgan vaqtni körsatadi: aksiya tugaşi (kun · soat · daqiqa · soniya), imtihon yoki test vaqti, SMS kodni qayta yuborişgaça («00:59»). Raqamlar tabular — sakramaydi; oz qolganda qizil + «!» va «oz qoldi» sözi, tugaganda matn. Ekran öquvçiga siyrak aytiladi: 5 daqiqa, 1 daqiqa, 10 soniya qolganda va tugaganda. Uzoq muddat uçun yil birligi: data-units="yd" → «1 yil · 354 kun» (soniyasiz birliklarda daqiqada bir yangilanadi) — domen, obuna, litsenziya muddati.
Kodni qayta yuboriş Qayta yuborişgaça dan keyin mumkin
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | blockssolid Töq bloklar — banner/aksiyainline Bir qator «00:59» — matn içida | blocks |
data-size | smmd | md |
data-state | runningurgent data-urgent soniyadan kam qoldi (xulq qöyadi)ended Tugadi | running |
Anatomiya
- root
.fx-countdownşart - label
.fx-countdown__labelixtiyoriy - units
.fx-countdown__unitsixtiyoriy - unit
.fx-countdown__unitixtiyoriy - num
.fx-countdown__numixtiyoriy - name
.fx-countdown__nameixtiyoriy - sep
.fx-countdown__sepixtiyoriy - done
.fx-countdown__doneixtiyoriy
Holatlar
Klaviatura va kiriş
Ildiz role="timer" (özi gapirmaydi), aria-label har daqiqa yangilanadi: «Test: 44 daqiqa 59 soniya». Alohida aria-live hudud faqat 5 daq / 1 daq / 10 s qolganda va tugaganda aytadi. Oz qolgani rangdan taşqari «!» va «oz qoldi» sözi bilan, tugagani çizilgan raqam va matn bilan.
Kod
AI uçun: qaçon işlatiladi
- Aksiya, röyxatdan ötiş yoki tarif narxi tugaşigaça qolgan vaqt.
- Imtihon, test, tölov sessiyasi kabi çeklangan vaqtli jarayon.
- SMS kodni qayta yuboriş tugmasi yonida (ixçam variant).
- Ötgan vaqtni nisbiy körsatiş («3 daqiqa oldin») →
reltime - Jarayon foizini körsatiş →
progress - Har soniyani ekran öquvçiga aytdirmang — aria-live ildizda emas, faqat çegaralarda.
- Soxta şoşilinç qilib, sahifa yangilanganda sanoqni qaytadan boşlamang — tugaş vaqti serverdan (data-to) kelsin.
- Raqamlarni proporsional şriftda qoldirmang — har soniyada kenglik sakraydi (tabular-nums).
npx foxui add countdown
<div class="fx-countdown" data-fx-countdown data-seconds="273645" data-urgent="0" data-done="Aksiya tugadi"> <span class="fx-countdown__label">Kuzgi çegirma −30 % tugaşiga</span> </div> <div class="fx-countdown" data-fx-countdown data-variant="solid" data-size="sm" data-seconds="2700" data-urgent="300" data-done="Vaqt tugadi — javoblar yuborildi"> <span class="fx-countdown__label">Test: 20 savoldan 14 tasi belgilangan</span> </div> <p style="margin:0;font-size:var(--fx-font-size-sm)">Kodni qayta yuboriş <span class="fx-countdown" data-fx-countdown data-variant="inline" data-seconds="59" data-urgent="0"><span class="fx-countdown__label fx-sr-only">Qayta yuborişgaça</span></span> dan keyin mumkin</p>
Tokenlar: --fx-bg-error-solid --fx-bg-page --fx-bg-surface --fx-border-color-default --fx-border-width-default --fx-control-h-lg --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-radius-control --fx-space-1 --fx-space-2 --fx-space-4 --fx-text-disabled --fx-text-error --fx-text-on-error --fx-text-primary --fx-text-secondary --fx-text-tertiary