Holat va javob · compound
Boşlaş röyxati
Yangi foydalanuvçi uçun onboarding kartasi: jarayon çiziği va «2 / 5», qadamlar röyxati. Joriy qadam kengayib, izoh va amal tugmasini körsatadi; belgi bosilsa qadam bajariladi. Hammasi tugasa tabrik matni çiqadi; röyxatni yopiş eslab qolinadi.
Boşlaş
Beşta qadamda iş muhitini sozlang.
- Profilni töldiring
Ism va rasm qöying.
- Jamoadoşlarni taklif qiling
Kamida bitta hamkasbingizni email orqali taklif qiling.
- Birinçi vazifani yarating
Vazifa yaratib, mas'ul belgilang.
- Bildirişnomalarni sozlang
Qaysi xabarlar kerakligini tanlang.
- Telegram'ni ulang
Ariza kelganda guruhga xabar boradi.
Barakalla! Hammasi tayyor — endi işni boşlasangiz böladi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | todocurrent Birinçi bajarilmagan — xulq qöyadidone | todo |
Anatomiya
- root
.fx-checklistşart - head
.fx-checklist__headixtiyoriy - title
.fx-checklist__titleşart - sub
.fx-checklist__subixtiyoriy - dismiss
.fx-checklist__dismissixtiyoriy - bar
.fx-checklist__barixtiyoriy - track
.fx-checklist__trackixtiyoriy - count
.fx-checklist__countixtiyoriy - list
.fx-checklist__listixtiyoriy - item
.fx-checklist__itemşart - box
.fx-checklist__boxixtiyoriy - name
.fx-checklist__nameixtiyoriy - more
.fx-checklist__moreixtiyoriy - text
.fx-checklist__textixtiyoriy - done
.fx-checklist__doneixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Qadam belgilari va amal tugmalari |
| Space, Enter | Qadamni bajarildi/bajarilmadi |
Karta aria-labelledby; qadam belgisi role="checkbox" + aria-checked + aria-label; jarayon role="progressbar" aria-valuenow; hisoblagiç aria-live=polite. Bajarilganlik çiziq + ✓ bilan ham bildiriladi (rangga tayanmaydi).
Kod
AI uçun: qaçon işlatiladi
npx foxui add checklist
<section class="fx-checklist" data-fx-checklist data-fx-checklist-key="boshlash" aria-labelledby="cl-t">
<div class="fx-checklist__head">
<h2 class="fx-checklist__title" id="cl-t">Boşlaş</h2>
<button class="fx-btn fx-checklist__dismiss" data-variant="ghost" data-size="sm" data-shape="icon" data-checklist="dismiss" aria-label="Röyxatni yopiş"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg></button>
<p class="fx-checklist__sub">Beşta qadamda iş muhitini sozlang.</p>
<div class="fx-checklist__bar"><div class="fx-checklist__track" role="progressbar" aria-label="Boşlaş jarayoni" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"></div><span class="fx-checklist__count" aria-live="polite"></span></div>
</div>
<ol class="fx-checklist__list">
<li class="fx-checklist__item" data-state="done" data-id="profil"><button type="button" class="fx-checklist__box" role="checkbox" aria-checked="true" aria-label="Profilni töldiring"></button><span class="fx-checklist__name">Profilni töldiring</span><div class="fx-checklist__more"><p class="fx-checklist__text">Ism va rasm qöying.</p><button class="fx-btn" data-size="sm" data-variant="primary" data-checklist="done">Profilga ötiş</button></div></li>
<li class="fx-checklist__item" data-state="todo" data-id="jamoa"><button type="button" class="fx-checklist__box" role="checkbox" aria-checked="false" aria-label="Jamoadoşlarni taklif qiling"></button><span class="fx-checklist__name">Jamoadoşlarni taklif qiling</span><div class="fx-checklist__more"><p class="fx-checklist__text">Kamida bitta hamkasbingizni email orqali taklif qiling.</p><button class="fx-btn" data-size="sm" data-variant="primary" data-checklist="done">Taklif yuboriş</button></div></li>
<li class="fx-checklist__item" data-state="todo" data-id="vazifa"><button type="button" class="fx-checklist__box" role="checkbox" aria-checked="false" aria-label="Birinçi vazifani yarating"></button><span class="fx-checklist__name">Birinçi vazifani yarating</span><div class="fx-checklist__more"><p class="fx-checklist__text">Vazifa yaratib, mas'ul belgilang.</p><button class="fx-btn" data-size="sm" data-variant="primary" data-checklist="done">Vazifa yaratiş</button></div></li>
<li class="fx-checklist__item" data-state="todo" data-id="bildirish"><button type="button" class="fx-checklist__box" role="checkbox" aria-checked="false" aria-label="Bildirişnomalarni sozlang"></button><span class="fx-checklist__name">Bildirişnomalarni sozlang</span><div class="fx-checklist__more"><p class="fx-checklist__text">Qaysi xabarlar kerakligini tanlang.</p><button class="fx-btn" data-size="sm" data-variant="primary" data-checklist="done">Sozlamalarga ötiş</button></div></li>
<li class="fx-checklist__item" data-state="todo" data-id="integratsiya"><button type="button" class="fx-checklist__box" role="checkbox" aria-checked="false" aria-label="Telegram'ni ulang"></button><span class="fx-checklist__name">Telegram'ni ulang</span><div class="fx-checklist__more"><p class="fx-checklist__text">Ariza kelganda guruhga xabar boradi.</p><button class="fx-btn" data-size="sm" data-variant="primary" data-checklist="done">Ulaş</button></div></li>
</ol>
<p class="fx-checklist__done">Barakalla! Hammasi tayyor — endi işni boşlasangiz böladi.</p>
</section>Tokenlar: --fx-bg-brand-solid --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-ease-spring --fx-ease-standard --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-base --fx-motion-fast --fx-motion-slow --fx-radius-circle --fx-radius-surface --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-3 --fx-space-4 --fx-space-5 --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary