Navigatsiya · compound
Bosqiç yöli
CRM bitimi yoki ariza bosqiçlari chevronlar qatorida (4.140, SLDS «Path»): ötilgan — ✓ belgisi, joriy — töldirilgan va qalin, keyingilari — xira, yöqotilgan — ✕. Bosqiçni bosib köriş (tafsilot, körsatma) va öngdagi tugma bilan «Bosqiçni yakunlaş» yoki boşqa bosqiçni joriy qiliş. Telefonda faqat joriy bosqiç nomi yoziladi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | done ötilgan (✓) — xulq joriydan oldingilarga özi qöyadilost yöqotilgan / rad etilgan (✕) | — |
Anatomiya
- root
.fx-pathşart - stages
.fx-path__stagesşart - stage
.fx-path__stageşart - label
.fx-path__labelixtiyoriy - action
.fx-path__actionixtiyoriy - status
.fx-path__statusixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← →, Home, End | Bosqiçlar orasida fokus |
| Enter / Boʻsh joy | Bosqiçni köriş (tanlaş) |
| Tab | Amal tugmasiga ötadi |
Bosqiçlar role=tablist / tab; joriy bosqiç aria-current="step", körilayotgani aria-selected; har bosqiçda aria-description (ötilgan, joriy, keyingi, yöqotilgan). Amal natijasi aria-live orqali e'lon qilinadi.
Naqş: WAI-ARIA APG tabs · rol tablist
Kod
AI uçun: qaçon işlatiladi
- CRM bitimi, ariza, buyurtma — bitta yozuvning çiziqli bosqiçlari va keyingi qadamga ötkaziş.
- Köp sahifali forma qadamlari →
wizard - Faqat körsatiş uçun qadamlar →
steps - Hodisalar tarixi →
timeline - 7 dan köp bosqiç bermang — chevronlar öqilmaydi; uzun jarayon uçun steps yoki timeline.
- Bosqiç holatini faqat rang bilan bermang — ✓ / ✕ belgisi va aria-description bor.
- Ommaviy navigatsiya (sahifalar) uçun işlatmang — bu bitta yozuvning holati.
npx foxui add path
<div class="fx-path" data-fx-path>
<div class="fx-path__stages" role="tablist" aria-label="Bitim bosqiçlari">
<button class="fx-path__stage" type="button"><span class="fx-path__label">Yangi</span></button>
<button class="fx-path__stage" type="button"><span class="fx-path__label">Aloqa örnatildi</span></button>
<button class="fx-path__stage" type="button" aria-current="step"><span class="fx-path__label">Taklif yuborildi</span></button>
<button class="fx-path__stage" type="button"><span class="fx-path__label">Muzokara</span></button>
<button class="fx-path__stage" type="button"><span class="fx-path__label">Yopildi</span></button>
</div>
<button class="fx-btn fx-path__action" data-variant="primary" data-size="sm" type="button">Bosqiçni yakunlaş</button>
</div>
<div class="fx-path" data-fx-path>
<div class="fx-path__stages" role="tablist" aria-label="Ariza bosqiçlari">
<button class="fx-path__stage" type="button" data-state="done"><span class="fx-path__label">Qabul qilindi</span></button>
<button class="fx-path__stage" type="button" data-state="done"><span class="fx-path__label">Körib çiqildi</span></button>
<button class="fx-path__stage" type="button" aria-current="step" data-state="lost"><span class="fx-path__label">Rad etildi</span></button>
</div>
</div>Tokenlar: --fx-bg-brand-solid --fx-bg-brand-solid-hover --fx-bg-brand-subtle --fx-bg-error-solid --fx-bg-muted --fx-bg-subtle --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-ease-standard --fx-font-size-sm --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-fast --fx-motion-press --fx-radius-control --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-brand --fx-text-on-brand --fx-text-on-error --fx-text-primary --fx-text-secondary