Körsatiş · compound
Reja / vazifalar navbati
Agent rejasi: sarlavha, progress «3/7» va qadamlar. Holatlar: bajarildi (✓), joriy (halqa pulsatsiyasi, aria-current="step"), kutmoqda (böş halqa), ötkazib yuborildi (çiziq). <details> bölsa yiğiladi.
Oktabr hisoboti rejasi3/6
- Bajarildi: Mijozlar jadvalini öqiş
- Bajarildi: Nofaol yozuvlarni topiş
- Bajarildi: Ruxsat söraş
- Hozir bajarilmoqda: Arxivga köçiriş
- Kutmoqda: Hisobotni qayta hisoblaş
- Ötkazib yuborildi: Telegramga xabar yuboriş
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | activedoneskipped | pending |
Anatomiya
- root
.fx-planşart - head
.fx-plan__headixtiyoriy - title
.fx-plan__titleixtiyoriy - count
.fx-plan__countixtiyoriy - bar
.fx-plan__barixtiyoriy - list
.fx-plan__listşart - item
.fx-plan__itemşart - chev
.fx-plan__chevixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space | Rejani yiğadi/oçadi (<details> bölsa) |
Tartibli röyxat <ol>; joriy qadamda aria-current="step"; har qadamda holat yaşirin söz bilan aytiladi. Progress — native <progress>. <details> bölsa Enter/Space bilan yiğiladi.
Naqş: WAI-ARIA APG disclosure
Kod
AI uçun: qaçon işlatiladi
- Agent rejasi, bajarilayotgan vazifalar va navbat.
npx foxui add plan
<details class="fx-plan" open>
<summary class="fx-plan__head"><span class="fx-plan__title">Oktabr hisoboti rejasi</span><span class="fx-plan__count">3/6 <svg data-fx-icon="chev" class="fx-plan__chev" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></span><progress class="fx-plan__bar" max="6" value="3" aria-label="Reja bajarilişi"></progress></summary>
<ol class="fx-plan__list">
<li class="fx-plan__item" data-state="done"><span><span class="fx-sr-only">Bajarildi: </span>Mijozlar jadvalini öqiş</span></li>
<li class="fx-plan__item" data-state="done"><span><span class="fx-sr-only">Bajarildi: </span>Nofaol yozuvlarni topiş</span></li>
<li class="fx-plan__item" data-state="done"><span><span class="fx-sr-only">Bajarildi: </span>Ruxsat söraş</span></li>
<li class="fx-plan__item" data-state="active" aria-current="step"><span><span class="fx-sr-only">Hozir bajarilmoqda: </span>Arxivga köçiriş</span></li>
<li class="fx-plan__item" data-state="pending"><span><span class="fx-sr-only">Kutmoqda: </span>Hisobotni qayta hisoblaş</span></li>
<li class="fx-plan__item" data-state="skipped"><span><span class="fx-sr-only">Ötkazib yuborildi: </span>Telegramga xabar yuboriş</span></li>
</ol>
</details>Tokenlar: --fx-bg-brand-solid --fx-bg-muted --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-duration-pulse --fx-ease-standard --fx-fg-success --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-base --fx-motion-slow --fx-radius-circle --fx-radius-overlay --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-3 --fx-space-4 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary