Harakat · primitive
Şakl morfi
Tugma bosilganda va tanlanganda yoyi prujina bilan özgaradi (M3 Expressive shape morph): standart — yumaloq tugma bosilganda yoki tanlanganda kvadratroq böladi; data-fx-morph="round" — aksinça. Faqat burçak özgaradi, ölçam va joy sakramaydi. .fx-morph — tugma guruhi (oraliq bilan) yoki data-variant="connected" — yopişgan guruh: içki burçaklar kiçik, tanlangan tugma töliq yumaloqlanadi. Tanlangan holat aria-pressed / aria-checked / aria-selected yoki içidagi radio/checkbox orqali — JS şart emas (aria-pressed uçun togglegroup xulqi). Harakat kamaytirilsa şakl darhol almaşadi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-fx-morph | square yumaloq → kvadratroq (standart, atribut qiymatsiz)round kvadratroq → yumaloq | square |
data-variant | gap tugmalar orasida böşliqconnected yopişgan guruh | gap |
Anatomiya
- item
[data-fx-morph]şart - group
.fx-morphixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Guruhga kiradi (togglegroup bilan — tanlangan tugmaga) |
| ← → | Guruh içida keyingi tugma (togglegroup yoki radio) |
| Space / Enter | Tanlaydi |
Tanlov holati aria-pressed (tugma) yoki radio/checkbox orqali — ekran öquvçi «bosilgan»/«belgilangan» deb aytadi. Radio yorliğida fokus halqasi yorliqning öziga çiziladi. Şakl bezak, ma'no rangda va holatda ham bor. prefers-reduced-motion va data-fx-motion="none"da ötiş darhol.
Naqş: WAI-ARIA APG button · rol group
Kod
AI uçun: qaçon işlatiladi
- Davr tanlaş (Kun · Hafta · Oy), köriniş almaştiriş — landing yoki dashboard sarlavhasida.
- Asosiy CTA tugmasiga «tirik» bosiliş hissi beriş (expressive ekran).
- Ilova içidagi oddiy segment tanlov →
togglegroup - Vositalar paneli tugmalari →
toolbar - Şakl özgarişini yagona belgi qilmang — tanlangan tugma rangi ham boşqaça (guruhda avtomatik).
- Jadval va ziç forma içidagi tugmalarga qöymang — bu ifodali (expressive) ekranlar uçun.
- Bir guruhda morfli va morfsiz tugmalarni aralaştirmang.
npx foxui add morph
<div class="fx-morph" role="group" aria-label="Davr" data-fx-togglegroup data-required> <button type="button" class="fx-btn fx-togglegroup__item" data-fx-morph aria-pressed="false">Kun</button> <button type="button" class="fx-btn fx-togglegroup__item" data-fx-morph aria-pressed="true">Hafta</button> <button type="button" class="fx-btn fx-togglegroup__item" data-fx-morph aria-pressed="false">Oy</button> <button type="button" class="fx-btn fx-togglegroup__item" data-fx-morph aria-pressed="false">Yil</button> </div> <fieldset class="fx-morph" data-variant="connected" style="border:0;padding:0;margin:var(--fx-space-4) 0 0"> <legend class="fx-sr-only">Köriniş</legend> <label class="fx-btn" data-fx-morph><input type="radio" name="morph-view" value="list" checked>Röyxat</label> <label class="fx-btn" data-fx-morph><input type="radio" name="morph-view" value="board">Kanban</label> <label class="fx-btn" data-fx-morph><input type="radio" name="morph-view" value="calendar">Kalendar</label> </fieldset> <p style="display:flex;gap:var(--fx-space-3);margin-block-start:var(--fx-space-4)"> <button type="button" class="fx-btn" data-variant="primary" data-size="lg" data-fx-morph>Buyurtma beriş</button> <button type="button" class="fx-btn" data-size="lg" data-fx-morph="round">Savatga</button> </p>
Tokenlar: --fx-bg-brand-solid --fx-bg-brand-solid-hover --fx-bg-muted --fx-border-color-focus --fx-border-width-focus --fx-control-h-md --fx-ease-spring --fx-ease-standard --fx-motion-fast --fx-motion-instant --fx-motion-slow --fx-radius-control --fx-space-1 --fx-text-on-brand --fx-text-primary