Tanlaş · molecule
Vaqt slotlari
Bron va uçraşuv uçun böş vaqtlar töri: har vaqt — tugmasimon radio, band vaqt — çizilgan va «band» deb yozilgan, oz qolgani — «1 joy». Kunning qismlari böyiça guruhlanadi (Ertalab · Tuşdan keyin). Kalendar bilan yonma-yon: çapda kun, öngda vaqt. JS kerak emas — native radio.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-columns | 346 | 4 |
data-layout | gridlist Tor yon panel uçun ustun röyxat (aylantiriladi) | grid |
data-size | smmd | md |
Anatomiya
- root
.fx-timeslotsşart - title
.fx-timeslots__titleixtiyoriy - head
.fx-timeslots__headixtiyoriy - meta
.fx-timeslots__metaixtiyoriy - group
.fx-timeslots__groupixtiyoriy - label
.fx-timeslots__labelixtiyoriy - grid
.fx-timeslots__gridşart - slot
.fx-timeslots__slotşart - note
.fx-timeslots__noteixtiyoriy - empty
.fx-timeslots__emptyixtiyoriy - foot
.fx-timeslots__footixtiyoriy
Holatlar
checkedbusyfewfocus
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Tanlangan (yoki birinçi) slotga kiradi |
| ← → ↑ ↓ | Keyingi/oldingi böş slotni tanlaydi (band slot ötkazib yuboriladi) |
| Space | Fokusdagi slotni tanlaydi |
Tör — fieldset + legend (kun nomi), har guruh role=group va aria-labelledby. Har slot native radio: Tab bilan guruhga kiriladi, strelkalar bilan yuriladi, band (disabled) slot ötkazib yuboriladi. Band holat «band» sözi bilan, tanlangan — ✓ bilan (rang yolğiz emas).
Naqş: WAI-ARIA APG radio · rol radiogroup
Kod
AI uçun: qaçon işlatiladi
Işlating
- Uçraşuv, konsultatsiya, xizmatga yoziliş: kun tanlangandan keyin böş vaqtni tanlaş.
- Öqituvçi yoki usta jadvalidagi böş oynalarni körsatiş.
Işlatmang
- Istalgan vaqtni erkin kiritiş (masalan, eslatma vaqti) →
timefield - Butun hafta jadvalini tahrirlaş →
schedule - Band vaqtni butunlay yaşirmang — çizilgan holda körsating, aks holda jadval «teşik» bölib körinadi.
- Vaqtni 12 soatlik (AM/PM) formatda yozmang — Özbekistonda 24 soatlik.
- Vaqt zonasini yozmasdan qoldirmang, ayniqsa onlayn uçraşuvda.
npx foxui add timeslots
<div style="display:flex;flex-wrap:wrap;gap:var(--fx-space-8);align-items:start"> <div class="fx-calendar" data-fx-calendar data-value="2026-10-23" data-min="2026-10-19" data-off-days="7" aria-label="Uçraşuv kuni"></div> <fieldset class="fx-timeslots" data-columns="3" style="inline-size:min(100%,22rem)"> <legend class="fx-timeslots__title">23-oktabr, juma</legend> <div class="fx-timeslots__head"><span class="fx-timeslots__meta">Toşkent vaqti (UTC+5) · 30 daqiqa</span></div> <div class="fx-timeslots__group" role="group" aria-labelledby="ts-am"><span class="fx-timeslots__label" id="ts-am">Ertalab</span><div class="fx-timeslots__grid"><label class="fx-timeslots__slot"><input type="radio" name="vaqt" value="09:00"><span>09:00</span></label><label class="fx-timeslots__slot"><input type="radio" name="vaqt" value="09:30" disabled><span>09:30</span><span class="fx-timeslots__note">band</span></label><label class="fx-timeslots__slot"><input type="radio" name="vaqt" value="10:00"><span>10:00</span></label><label class="fx-timeslots__slot" data-few><input type="radio" name="vaqt" value="10:30"><span>10:30</span><span class="fx-timeslots__note">1 joy</span></label><label class="fx-timeslots__slot"><input type="radio" name="vaqt" value="11:00" disabled><span>11:00</span><span class="fx-timeslots__note">band</span></label><label class="fx-timeslots__slot"><input type="radio" name="vaqt" value="11:30"><span>11:30</span></label></div></div> <div class="fx-timeslots__group" role="group" aria-labelledby="ts-pm"><span class="fx-timeslots__label" id="ts-pm">Tuşdan keyin</span><div class="fx-timeslots__grid"><label class="fx-timeslots__slot"><input type="radio" name="vaqt" value="14:00" checked><span>14:00</span></label><label class="fx-timeslots__slot"><input type="radio" name="vaqt" value="14:30"><span>14:30</span></label><label class="fx-timeslots__slot"><input type="radio" name="vaqt" value="15:00" disabled><span>15:00</span><span class="fx-timeslots__note">band</span></label><label class="fx-timeslots__slot"><input type="radio" name="vaqt" value="15:30"><span>15:30</span></label><label class="fx-timeslots__slot"><input type="radio" name="vaqt" value="16:00"><span>16:00</span></label><label class="fx-timeslots__slot"><input type="radio" name="vaqt" value="16:30"><span>16:30</span></label></div></div> <div class="fx-timeslots__foot"><span>Tanlandi: 14:00 – 14:30</span><button class="fx-btn" data-variant="primary" type="button">Bron qiliş</button></div> </fieldset> </div> <fieldset class="fx-timeslots" data-layout="list" data-size="sm" style="inline-size:min(100%,16rem)"> <legend class="fx-timeslots__title">Şanba, 24-oktabr</legend> <div class="fx-timeslots__grid"><label class="fx-timeslots__slot"><input type="radio" name="vaqt2" value="10:00"><span>10:00</span><span class="fx-timeslots__note">45 daq</span></label><label class="fx-timeslots__slot"><input type="radio" name="vaqt2" value="11:00" disabled><span>11:00</span><span class="fx-timeslots__note">band</span></label><label class="fx-timeslots__slot"><input type="radio" name="vaqt2" value="12:00"><span>12:00</span><span class="fx-timeslots__note">45 daq</span></label></div> </fieldset> <fieldset class="fx-timeslots" style="inline-size:min(100%,22rem)"><legend class="fx-timeslots__title">Yakşanba, 25-oktabr</legend><p class="fx-timeslots__empty">Bu kunda böş vaqt yöq. Keyingi böş kun — duşanba, 26-oktabr.</p></fieldset>
Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-surface --fx-border-color-default --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-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-regular --fx-font-weight-semibold --fx-knob-pill --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-control --fx-radius-surface --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-disabled --fx-text-error --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary
Şu toifadan
Kaskad tanlovIçma-iç tanlov (viloyat → tuman → mahalla): tugma bosilsa ustunlar ketma-ket yonma-yon oçiladi, oxirgi bandni tanlaş butun yölni (“Samarqand / Urgut”) yozadi.Checkbox, radio, switchCheckbox, radio, switch — native input + körinadigan quti.ChipFiltr çipi (bosiladi, tanlangani teskari rangda, içida son — alohida belgi) yoki teg (× bilan olib taşlanadi).Til almaştirgiçSayt tilini tanlaş: pill tugma — globus, joriy til va strelka; bosilganda tillar menyusi (fx-menu) oçiladi.Variantlar röyxatiCombobox va buyruqlar oynasining içki röyxati: guruh sarlavhasi, variant (ikonka yoki avatar, nom, izoh, öngda maslahat), faol variant, köp tanlovda ✓ (aria-multiselectable), «Yaratiş» varianti, böş holat.Bildirişnoma sozlamalariBildirişnoma sozlamalari matritsasi (naqş): qatorlar — hodisalar (Savdo, Vazifalar, Xavfsizlik guruhlari), ustunlar — kanallar (Email, Telegram, Ilova).