Kiritiş · molecule
Vaqt maydoni
Soat va daqiqa (24 soatli, ixtiyoriy soniya) segmentlari. ↑ ↓ qiymatni özgartiradi (daqiqa data-step qadami bilan), raqam yozilsa keyingi segmentga ötadi, Backspace tozalaydi. Formaga HH:MM yaşirin input orqali ketadi. Siferblat va röyxat (4.103): data-variant="list" — maydon yonidagi soat tugmasi 15 daqiqalik röyxatni oçadi (kompyuter; data-list-step, data-from, data-to), data-variant="dial" — soat siferblati (telefon): avval soat (taşqi halqa 12, 1…11, içki — 00, 13…23), keyin daqiqa (00…55), tanlangaç yopiladi. Segmentlar bilan yoziş ham doim işlaydi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | mdsm | md |
data-variant | field faqat segmentlarlist röyxat (kompyuter)dial siferblat (telefon) | field |
Anatomiya
- root
.fx-timefieldşart - segment
.fx-timefield__segşart - separator
.fx-timefield__sepixtiyoriy - toggle
.fx-timefield__toggleixtiyoriy - panel
.fx-timefield__panelixtiyoriy - option
.fx-timefield__optixtiyoriy - readout
.fx-timefield__readoutixtiyoriy - unit
.fx-timefield__unitixtiyoriy - face
.fx-timefield__faceixtiyoriy - number
.fx-timefield__numixtiyoriy - hand
.fx-timefield__handixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ↑ ↓ | Qiymat ±1 (daqiqa — qadam bilan) |
| PageUp / PageDown | Katta qadam (soat 6, daqiqa 10) |
| Home / End | Eng kiçik / eng katta |
| ← → | Oldingi / keyingi segment |
| 0–9 | Yozadi, tölsa keyingi segmentga ötadi |
| Backspace | Tozalaydi |
| Roʻyxatda ↑ ↓ / Home End | Faol vaqt; Enter — tanlaydi va yopadi |
| Siferblatda ← → / ↑ ↓ | Bir soat yoki 5 daqiqa; Enter — soatdan daqiqaga, keyin yopadi |
| Esc | Popoverni yopadi |
Har segment role=spinbutton (aria-valuenow/min/max, böş bölsa aria-valuetext=«boş»), guruh yorliği bilan. ← → segmentlar, ↑ ↓ qiymat. inputmode=numeric — mobil raqam klaviaturasi.
Naqş: WAI-ARIA APG spinbutton · rol spinbutton
Kod
AI uçun: qaçon işlatiladi
- Soat:daqiqa kiritiş (iş vaqti, eslatma, uçraşuv).
- Sana bilan birga: fx-datepicker yoniga.
- Sana tanlaş →
datepicker - Davomiylik yoki 5–10 tayyor vaqt →
select - AM/PM qöymang — Özbekistonda 24 soatli.
- Aniq daqiqa muhim bölmasa (5 daqiqa qadam) — data-step bering, röyxatdan tanlaşga majburlamang.
npx foxui add timefield
<div class="fx-field"> <span class="fx-label" id="tf1-l">Iş boşlanişi</span> <div class="fx-timefield" data-fx-timefield data-name="boshlanish" data-value="09:30" data-step="5" role="group" aria-labelledby="tf1-l"></div> </div> <div class="fx-field"> <span class="fx-label" id="tf2-l">Tanaffus (soniyagaça)</span> <div class="fx-timefield" data-fx-timefield data-name="tanaffus" data-seconds data-size="sm" role="group" aria-labelledby="tf2-l"></div> </div> <!-- Siferblat va roʻyxat (4.103) --> <div class="fx-field"> <span class="fx-label" id="tf3-l">Uçraşuv vaqti (röyxat, 15 daqiqa)</span> <div class="fx-timefield" id="tf3" data-fx-timefield data-variant="list" data-name="uchrashuv" data-value="10:30" data-from="09:00" data-to="18:00" data-step="15" role="group" aria-labelledby="tf3-l"></div> </div> <div class="fx-field"> <span class="fx-label" id="tf4-l">Yetkazib beriş vaqti (siferblat)</span> <div class="fx-timefield" id="tf4" data-fx-timefield data-variant="dial" data-name="yetkazish" data-value="14:20" data-step="5" role="group" aria-labelledby="tf4-l"></div> </div>
Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-field --fx-bg-muted --fx-bg-pressed --fx-bg-subtle --fx-border-color-error --fx-border-color-field --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-control-h-sm --fx-ease-standard --fx-font-size-display-sm --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-knob-pill --fx-motion-base --fx-motion-fast --fx-radius-badge --fx-radius-circle --fx-radius-control --fx-radius-nav --fx-size-control-sm --fx-size-icon-md --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-8 --fx-text-brand --fx-text-disabled --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary