Ma'lumot · molecule
Iş qatori
Vazifa yoki murojaat qatori: boşida ustuvorlik — hover yoki fokusda örnida checkbox çiqadi (bitta katak, ikki rol); bittasi tanlansa — hamma qatorda checkbox. ID (mono), holat, sarlavha, oxirida yorliq, muddat (keçikkan — qizil), bajaruvçi. Guruhlar yiğiladi.
Jarayonda 2
- FX-214Grafik tooltipi klaviaturadaKomponentKeçaMF
- FX-219Doska: klaviatura bilan sudraşBugunGU
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | opendonecancelled | open |
data-tone | normalsoonlate | normal |
Anatomiya
- list
.fx-rowsşart - row
.fx-rowşart - lead
.fx-row__leadixtiyoriy - select
.fx-row__selixtiyoriy - id
.fx-row__idixtiyoriy - title
.fx-row__titleşart - end
.fx-row__endixtiyoriy - due
.fx-row__dueixtiyoriy - group
.fx-rows__groupixtiyoriy - count
.fx-rows__countixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Sarlavha va checkbox böylab |
| Space | Belgilaydi |
Sarlavha — havola (butun qator bosiladi); checkbox aria-label bilan; ustuvorlik va holat role=img + aria-label.
Naqş: WAI-ARIA APG listbox · rol list
Kod
AI uçun: qaçon işlatiladi
- Vazifalar, murojaatlar, xatolar röyxati — tez skanerlaş va ommaviy tanlaş.
- Köp ustunli, saralanadigan ma'lumot →
table - Qatorga köp amal tugmasi qöymang — hover amallar yoki menyu.
- Sarlavhani ikki qatorga ötkazmang — bitta qator, töliq nom tafsilot panelida.
npx foxui add row
<details class="fx-rows__group" open><summary><span class="fx-flow" data-state="progress" aria-hidden="true"></span>Jarayonda <span class="fx-rows__count">2</span></summary> <ul class="fx-rows" id="vazifalar"> <li class="fx-row"><span class="fx-row__lead"><span class="fx-prio" data-level="urgent" role="img" aria-label="Şoşilinç"><i></i></span><label class="fx-check fx-row__sel"><input type="checkbox" aria-label="Tanlaş: FX-214"><span class="fx-check__box"></span></label></span><span class="fx-row__id">FX-214</span><span class="fx-flow" data-state="progress" role="img" aria-label="Jarayonda"></span><a class="fx-row__title" href="#">Grafik tooltipi klaviaturada</a><span class="fx-row__end"><span class="fx-badge" data-color="blue">Komponent</span><span class="fx-row__due" data-tone="late">Keça</span><span class="fx-avatar" data-size="sm" data-color="purple" role="img" aria-label="Mister Fox">MF</span></span></li> <li class="fx-row"><span class="fx-row__lead"><span class="fx-prio" data-level="2" role="img" aria-label="Örta"><i></i></span><label class="fx-check fx-row__sel"><input type="checkbox" aria-label="Tanlaş: FX-219"><span class="fx-check__box"></span></label></span><span class="fx-row__id">FX-219</span><span class="fx-flow" data-state="review" role="img" aria-label="Tekşiruvda"></span><a class="fx-row__title" href="#">Doska: klaviatura bilan sudraş</a><span class="fx-row__end"><span class="fx-row__due" data-tone="soon">Bugun</span><span class="fx-avatar" data-size="sm" data-color="yellow" role="img" aria-label="Guli">GU</span></span></li> </ul></details>
Tokenlar: --fx-bg-brand-subtle --fx-bg-muted --fx-bg-subtle --fx-border-color-default --fx-border-width-default --fx-control-h-md --fx-control-h-sm --fx-ease-standard --fx-fg-error --fx-font-adjust-mono --fx-font-family-mono --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-regular --fx-font-weight-semibold --fx-motion-fast --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-primary --fx-text-secondary --fx-text-tertiary