Navigatsiya · molecule
Qadamlar
Köp bosqiçli jarayon: bajarilganlar belgi bilan, joriysi halqa va qalin (aria-current="step"), keyingilar xira; orasida çiziq. Xato qadam (data-state="error") — «!» belgisi bilan. Kengaytma: data-orientation=vertical, data-style=dot, .fx-steps__text/.fx-steps__desc (tavsif qatori), bosiladigan qadam (<a>/<button> içida). Bosiladigan navigatsiya (4.141): data-clickable — ötilgan va joriy qadamlar tugmaga aylanadi (foxui.js → steps), bosilsa şu qadamga qaytiladi; erişilgan eng uzoq qadamgaça oldinga ham. Erişilmagan qadam aria-disabled. data-clickable="all" — erkin tartibli forma. Har tugma aria-label: «2-qadam: Yetkaziş manzili, bajarildi». Hodisa fx-steps-change (bekor qiliş mumkin).
- Tarif
- Tölov
- Tasdiq
- HisobPoçta tasdiqlandi
- TölovKarta ma'lumotlari
- Tayyor
- Savat
- Yetkaziş manzili
- Tölov
- Tasdiq
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | tododoneerror tekşiruvdan ötmagan qadam | todo |
data-orientation | vertical | — |
data-style | dot | — |
data-clickable | all hamma qadam bosiladi | — |
Anatomiya
- root
.fx-stepsşart - item
.fx-steps__itemşart - label
.fx-steps__labelixtiyoriy - text
.fx-steps__textixtiyoriy - desc
.fx-steps__descixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Bosiladigan qadamlar orasida |
| ← → (tikda ↑ ↓), Home / End | Qadam tugmalari orasida fokus |
| Enter / Boʻshliq | Şu qadamga ötadi |
<ol> + aria-label; joriy qadam aria-current="step"; bajarilgani matnda ham bölsin (masalan, sr-only «bajarildi»).
Kod
AI uçun: qaçon işlatiladi
npx foxui add steps
<ol class="fx-steps" aria-label="Obuna böliş"> <li class="fx-steps__item" data-state="done"><span class="fx-steps__label">Tarif</span></li> <li class="fx-steps__item" aria-current="step"><span class="fx-steps__label">Tölov</span></li> <li class="fx-steps__item"><span class="fx-steps__label">Tasdiq</span></li> </ol> <ol class="fx-steps" data-orientation="vertical"><li class="fx-steps__item" data-state="done"><a href="#a"><span class="fx-steps__text"><span class="fx-steps__label">Hisob</span><span class="fx-steps__desc">Poçta tasdiqlandi</span></span></a></li><li class="fx-steps__item" aria-current="step"><span class="fx-steps__text"><span class="fx-steps__label">Tölov</span><span class="fx-steps__desc">Karta ma'lumotlari</span></span></li><li class="fx-steps__item"><span class="fx-steps__label">Tayyor</span></li></ol> <!-- Bosiladigan qadamlar (4.141): oʻtilganiga qaytish --> <ol class="fx-steps" data-fx-steps data-clickable aria-label="Buyurtma rasmiylaştiriş"> <li class="fx-steps__item" data-state="done"><span class="fx-steps__label">Savat</span></li> <li class="fx-steps__item" data-state="done"><span class="fx-steps__label">Yetkaziş manzili</span></li> <li class="fx-steps__item" aria-current="step"><span class="fx-steps__label">Tölov</span></li> <li class="fx-steps__item"><span class="fx-steps__label">Tasdiq</span></li> </ol>
Tokenlar: --fx-bg-brand-solid --fx-bg-brand-solid-hover --fx-bg-brand-subtle --fx-border-color-default --fx-border-color-error --fx-border-color-focus --fx-border-color-strong --fx-border-width-focus --fx-fg-error --fx-font-size-sm --fx-font-size-xs --fx-font-weight-regular --fx-font-weight-semibold --fx-radius-badge --fx-radius-circle --fx-size-checkbox --fx-size-status-dot --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-brand --fx-text-error --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary