Harakat · molecule
FAB va speed dial
Ekran burçagidagi bitta asosiy amal (4.150, M3 FAB): telefonda «Yangi bitim», «Ariza qöşiş». Speed dial — bosilsa 3–5 amal ikon va yozuv bilan yoyiladi, asosiy tugma ✕ ga aylanadi. Kengaytirilgan (data-extended) — ikon + yozuv. Klaviatura: APG «Menu Button».
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-position | endstartinline oqimda (namuna, hujjat) | end |
data-extended | true ikon + yozuv | — |
data-size | sm | md |
Anatomiya
- root
.fx-fabşart - button
.fx-fab__btnşart - label
.fx-fab__labelixtiyoriy - actions
.fx-fab__actionsixtiyoriy - action
.fx-fab__actionixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter / Boʻsh joy / ↑ | Amallarni oçadi, birinçisiga fokus |
| ↑ ↓, Home, End | Amallar orasida yuradi |
| Esc | Yopadi, fokus asosiy tugmaga |
Ikonli FAB'da yozuv ekran öquvçi uçun (.fx-fab__label yaşirin). Speed dial — aria-haspopup="menu", aria-expanded, aria-controls; amallar role=menu / menuitem; Esc va taşqariga bosiş yopadi, fokus asosiy tugmaga qaytadi.
Naqş: WAI-ARIA APG menu-button · rol button
Kod
AI uçun: qaçon işlatiladi
- Telefon ilovasida ekranning bitta asosiy yaratiş amali (yangi bitim, ariza, xabar).
- Oddiy sahifa amali →
button - Köp amallar röyxati →
menu - Sahifada bittadan köp FAB qöymang — u eng asosiy amal.
- Speed dialda 5 dan köp amal bermang va yozuvsiz ikon qoldirmang.
- Kompyuterda katta jadval ustida yopib qöymasin — kompyuterda sahifa sarlavhasidagi asosiy tugma afzal.
- Xavfli amal (öçiriş) uçun FAB işlatmang.
npx foxui add fab
<div class="fx-fab" data-fx-fab data-position="inline">
<ul class="fx-fab__actions" id="fab-yangi" role="menu" aria-label="Yangi yaratiş" hidden>
<li role="none"><button class="fx-fab__action" type="button" role="menuitem" data-action="bitim"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16v12H4zM9 7V5h6v2" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>Bitim</button></li>
<li role="none"><button class="fx-fab__action" type="button" role="menuitem" data-action="mijoz"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 20c1.5-3.5 4.5-5 8-5s6.5 1.5 8 5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>Mijoz</button></li>
<li role="none"><button class="fx-fab__action" type="button" role="menuitem" data-action="vazifa"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l4 4 10-10" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>Vazifa</button></li>
</ul>
<button class="fx-fab__btn" type="button" aria-haspopup="menu" aria-controls="fab-yangi" aria-expanded="false"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="fx-fab__label">Yangi yaratiş</span></button>
</div>
<div class="fx-fab" data-position="inline" data-extended>
<button class="fx-fab__btn" type="button"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="fx-fab__label">Yangi ariza</span></button>
</div>Tokenlar: --fx-bg-brand-solid --fx-bg-brand-solid-hover --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-lg --fx-control-h-md --fx-duration-stagger --fx-ease-emphasized --fx-ease-standard --fx-font-size-md --fx-font-size-sm --fx-font-weight-medium --fx-font-weight-semibold --fx-knob-motion-stagger --fx-knob-pill --fx-motion-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-motion-shift-md --fx-radius-circle --fx-shadow-lg --fx-shadow-md --fx-size-icon-md --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-on-brand --fx-text-primary --fx-text-secondary