Ma'lumot · molecule
Tartiblanadigan röyxat
Qatorlarni qayta tartiblaş: uşlagiç tugmasi — siçqonça bilan sudraş yoki klaviatura (Space oladi, ↑ ↓ siljitadi, Space qöyadi, Esc bekor qiladi). Har harakat aria-live bilan e'lon qilinadi («Dilnoza, 2-örin, 4 tadan»). Hodisa fx-sortable-change tartibni beradi.
- Narxlar jadvalini yangilaş
- Mijozga taklif yuboriş
- Ombor hisobotini tekşiriş
- Yangi logotipni tasdiqlaş
Anatomiya
- root
.fx-sortableşart - item
.fx-sortable__itemşart - handle
.fx-sortable__handleşart - label
.fx-sortable__labelixtiyoriy - live
.fx-sortable__liveixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Space / Enter | Uşlagiçda: oliş va qöyiş |
| ↑ ↓ | Uşlangan qatorni bir örin siljitadi |
| Home End | Eng boşiga/oxiriga |
| Esc | Bekor qiladi, asl tartib |
Uşlagiç — tugma, aria-pressed (uşlangan) va aria-label «Tartibni özgartiriş: nom»; aria-live=polite orqali yangi örin e'lon qilinadi; uşlangan qator soya va qalin çegara bilan (rangdan taşqari şakl).
Kod
AI uçun: qaçon işlatiladi
- Foydalanuvçi elementlar tartibini özi belgilaşi kerak bölganda (ustuvorlik, ustunlar, menyu).
npx foxui add sortable
<ul class="fx-sortable" data-fx-sortable aria-label="Vazifalar ustuvorligi" style="max-inline-size: 22rem"> <li class="fx-sortable__item"><button class="fx-sortable__handle" type="button" aria-label="Tartibni özgartiriş: Narxlar jadvalini yangilaş">⠿</button><span class="fx-sortable__label">Narxlar jadvalini yangilaş</span></li> <li class="fx-sortable__item"><button class="fx-sortable__handle" type="button" aria-label="Tartibni özgartiriş: Mijozga taklif yuboriş">⠿</button><span class="fx-sortable__label">Mijozga taklif yuboriş</span></li> <li class="fx-sortable__item"><button class="fx-sortable__handle" type="button" aria-label="Tartibni özgartiriş: Ombor hisobotini tekşiriş">⠿</button><span class="fx-sortable__label">Ombor hisobotini tekşiriş</span></li> <li class="fx-sortable__item"><button class="fx-sortable__handle" type="button" aria-label="Tartibni özgartiriş: Yangi logotipni tasdiqlaş">⠿</button><span class="fx-sortable__label">Yangi logotipni tasdiqlaş</span></li> </ul>
Tokenlar: --fx-bg-brand-subtle --fx-bg-muted --fx-bg-pressed --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-ease-standard --fx-font-size-lg --fx-font-size-sm --fx-motion-fast --fx-radius-badge --fx-radius-control --fx-shadow-md --fx-space-2 --fx-space-3 --fx-text-brand --fx-text-primary --fx-text-tertiary