Harakat · molecule
Vositalar paneli
Bir qatordagi amallar guruhi (tahrir paneli, jadval amallari): butun panel — bitta Tab nuqtasi, içida ← → Home End bilan yuriladi. Guruhlar ajratgiç bilan, toggle tugmalar aria-pressed. Tik variant — aria-orientation="vertical" (#94). Suzuvçi (data-variant="floating", 4.158) — hudud pastida yopişqoq kapsula; tanlov paneli (data-variant="bubble" + data-for) — matn tanlanganda tanlov ustida çiqadigan formatlaş paneli, Alt+F10 bilan fokus.
3 ta bitim tanlandi. Pastdagi panel hudud bilan birga turadi.
Mijoz bilan uçraşuv juma kuni soat 15:00 da. Matnni belgilang — formatlaş paneli çiqadi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | flatfloating pastda yopişqoq kapsula, soyalibubble tanlov ustida; data-for — maydon id | default |
aria-orientation | horizontalvertical | horizontal |
Anatomiya
- root
.fx-toolbarşart - group
.fx-toolbar__groupixtiyoriy - sep
.fx-toolbar__sepixtiyoriy - spacer
.fx-toolbar__spacerixtiyoriy
Holatlar
pressed
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Panelga kiradi/çiqadi (bitta nuqta) |
| ← → | Keyingi/oldingi tugma (tikda ↑ ↓) |
| Home, End | Birinçi/oxirgi tugma |
| Alt+F10 (maydonda), Esc | Tanlov paneliga fokus; Esc — yaşiradi va maydonga qaytaradi |
role="toolbar" + aria-label; faqat bittasi tabindex=0 (roving), boşqalari -1; toggle tugmada aria-pressed; tik panelda aria-orientation="vertical" va ↑ ↓.
Naqş: WAI-ARIA APG toolbar · rol toolbar
Kod
AI uçun: qaçon işlatiladi
Işlating
- Bir-biriga boğliq 3+ amalni bir joyda jamlaş; tahrir, jadval yoki grafik boşqaruvi.
npx foxui add toolbar
<div class="fx-toolbar" role="toolbar" aria-label="Matn formatlaş" data-fx-toolbar>
<div class="fx-toolbar__group">
<button class="fx-btn" data-variant="ghost" data-size="sm" type="button" aria-pressed="true"><b>B</b><span class="fx-sr-only"> Qalin</span></button>
<button class="fx-btn" data-variant="ghost" data-size="sm" type="button" aria-pressed="false"><i>I</i><span class="fx-sr-only"> Qiya</span></button>
<button class="fx-btn" data-variant="ghost" data-size="sm" type="button" aria-pressed="false"><u>U</u><span class="fx-sr-only"> Tagi çizilgan</span></button>
</div>
<span class="fx-toolbar__sep" role="separator" aria-orientation="vertical"></span>
<div class="fx-toolbar__group">
<button class="fx-btn" data-variant="ghost" data-size="sm" type="button">Havola</button>
<button class="fx-btn" data-variant="ghost" data-size="sm" type="button">Rasm</button>
</div>
<span class="fx-toolbar__spacer"></span>
<button class="fx-btn" data-size="sm" type="button">Saqlaş</button>
</div>
<!-- Suzuvchi va tanlov paneli (4.158) -->
<div style="block-size: 12rem; overflow: auto; border: 1px solid var(--fx-border-color-default); border-radius: var(--fx-radius-surface); padding: var(--fx-space-4)">
<p style="block-size: 14rem">3 ta bitim tanlandi. Pastdagi panel hudud bilan birga turadi.</p>
<div class="fx-toolbar" data-variant="floating" role="toolbar" aria-label="Tanlanganlar bilan" data-fx-toolbar>
<button class="fx-btn" data-variant="ghost" data-size="sm" type="button">Mas'ul tayinlaş</button>
<button class="fx-btn" data-variant="ghost" data-size="sm" type="button">Bosqiçni özgartiriş</button>
<span class="fx-toolbar__sep" role="separator" aria-orientation="vertical"></span>
<button class="fx-btn" data-variant="ghost" data-size="sm" type="button">Arxivlaş</button>
</div>
</div>
<div id="tb-izoh" class="fx-prose" contenteditable="true" role="textbox" aria-multiline="true" aria-label="Izoh" style="padding: var(--fx-space-3); border: 1px solid var(--fx-border-color-default); border-radius: var(--fx-radius-control)">Mijoz bilan uçraşuv juma kuni soat 15:00 da. Matnni belgilang — formatlaş paneli çiqadi.</div>
<div class="fx-toolbar" data-variant="bubble" data-for="tb-izoh" role="toolbar" aria-label="Matn formatlaş" data-fx-toolbar>
<button class="fx-btn" data-variant="ghost" data-size="sm" type="button" aria-pressed="false"><b>B</b><span class="fx-sr-only"> Qalin</span></button>
<button class="fx-btn" data-variant="ghost" data-size="sm" type="button" aria-pressed="false"><i>I</i><span class="fx-sr-only"> Qiya</span></button>
<span class="fx-toolbar__sep" role="separator" aria-orientation="vertical"></span>
<button class="fx-btn" data-variant="ghost" data-size="sm" type="button">Havola</button>
</div>Tokenlar: --fx-bg-muted --fx-bg-surface --fx-border-color-default --fx-border-color-surface --fx-border-width-default --fx-ease-enter --fx-motion-fast --fx-motion-shift-sm --fx-radius-circle --fx-radius-surface --fx-shadow-lg --fx-space-1 --fx-space-2 --fx-space-4 --fx-space-8 --fx-text-primary
Şu toifadan
Ommaviy panelTanlov bölsa pastda markazda suzib çiqadigan panel: son, summa (ixtiyoriy), amallar, ×.TugmaAmal tugmasi.AI checkpointAI suhbati yoki agent lentasidagi «şu nuqtaga qaytiş» belgisi (4.204, Vercel AI Elements «Checkpoint»; Cursor va Claude Code'dagi rewind).Yopiş tugmasiDialog, sheet, alert va chip uçun bir xil ✕ tugmasi.Nusxa tugmasiBir bosişda matn clipboard'ga yoziladi: nusxa ikoni ✓ ga yumşoq almaşadi (2 soniya), natija e'lon qilinadi.Prujinali sudraşElementni barmoq yoki siçqonça bilan suriş: sudralayotganda körsatkiçga yopişadi va biroz kötariladi, qöyib yuborilganda tezligi bilan biroz davom etadi (inersiya) va prujina bilan joyiga qaytadi (HIG, M3 Expressive, Vaul).