Navigatsiya · compound
Menubar
Ilova menyu qatori (4.148, APG menubar): «Fayl · Tahrir · Köriniş · Yordam» — hisobot konstruktori, hujjat tahrirlovçi, jadval muharriri kabi köp buyruqli ilovalar uçun. Har trigger ostida menyu; içki menyu (Eksport → Excel/PDF), belgilanadigan (menuitemcheckbox) va bittasi tanlanadigan (menuitemradio) bandlar, tugma yorliği (kbd), ajratuvçi, öçiq band. Bitta menyu oçiq bölsa, qöşni triggerga siçqonça yoki ← → bilan ötilganda u ham oçiladi. Tanlov — fx-menubar-select hodisasi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | bar çegarali qatorflat fonsiz — tepa panel içida | bar |
data-tone | neutraldanger | neutral |
Anatomiya
- root
.fx-menubarşart - bar
.fx-menubar__barşart - entry
.fx-menubar__entryixtiyoriy - trigger
.fx-menubar__triggerşart - menu
.fx-menubar__menuşart - item
.fx-menubar__itemşart - kbd
.fx-menubar__kbdixtiyoriy - separator
.fx-menubar__sepixtiyoriy - group
.fx-menubar__groupixtiyoriy - label
.fx-menubar__labelixtiyoriy
Holatlar
opencheckeddisabled
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← / → | Qatorda oldingi / keyingi menyu (menyu oçiq bölsa — u ham oçiladi; içki menyuda → oçadi, ← yopadi) |
| ↓ / Enter / Space | Menyuni oçadi, birinçi bandga |
| ↑ | Menyuni oçadi, oxirgi bandga; menyu içida — oldingi band |
| Home / End | Birinçi / oxirgi band |
| Enter | Bandni tanlaydi va menyuni yopadi |
| Space | Belgilanadigan bandni almaştiradi (menyu oçiq qoladi) |
| Esc | Bir daraja yopadi, fokus triggerga |
| Tab | Hamma menyularni yopib, keyingi elementga |
| Harf | Şu harf bilan boşlanuvçi bandga |
role=menubar, triggerlar menuitem + aria-haspopup/aria-expanded, menyular role=menu (aria-labelledby trigger'ga). Roving tabindex: qatorga Tab bilan bitta kiriş. Belgilanadigan bandlar aria-checked. Öçiq band aria-disabled (fokus oladi, tanlanmaydi).
Naqş: WAI-ARIA APG menubar · rol menubar
Kod
AI uçun: qaçon işlatiladi
Işlating
- Köp buyruqli iş muhiti: hisobot konstruktori, hujjat yoki jadval muharriri.
- Buyruqlar guruhlari doimiy körinib tursin («Fayl», «Tahrir»).
Işlatmang
- Bitta tugma ostidagi amallar röyxati →
menu - Sayt bölimlari navigatsiyasi →
nav - Ikon-tugmalar qatori →
toolbar - Sayt navigatsiyasi (havolalar) uçun menubar işlatmang — u ilova buyruqlari uçun; sayt menyusi — nav yoki site-header.
- Har bandni içki menyuga joylamang — 2 darajadan çuqur bölmasin.
- Faqat rang bilan tanlangan holatni körsatmang — ✓ / ● belgisi bor.
npx foxui add menubar
<nav class="fx-menubar" data-fx-menubar aria-label="Hisobot konstruktori">
<ul class="fx-menubar__bar" role="menubar" aria-label="Hisobot konstruktori">
<li role="none" class="fx-menubar__entry">
<button class="fx-menubar__trigger" role="menuitem" type="button">Fayl</button>
<ul class="fx-menubar__menu" role="menu">
<li role="none"><button class="fx-menubar__item" role="menuitem" type="button">Yangi hisobot<kbd class="fx-menubar__kbd">Ctrl+N</kbd></button></li>
<li role="none"><button class="fx-menubar__item" role="menuitem" type="button">Oçiş…<kbd class="fx-menubar__kbd">Ctrl+O</kbd></button></li>
<li role="none" class="fx-menubar__entry">
<button class="fx-menubar__item" role="menuitem" type="button">Eksport</button>
<ul class="fx-menubar__menu" role="menu">
<li role="none"><button class="fx-menubar__item" role="menuitem" type="button" data-value="xlsx">Excel (.xlsx)</button></li>
<li role="none"><button class="fx-menubar__item" role="menuitem" type="button" data-value="pdf">PDF</button></li>
<li role="none"><button class="fx-menubar__item" role="menuitem" type="button" data-value="csv">CSV</button></li>
</ul>
</li>
<li role="separator" class="fx-menubar__sep"></li>
<li role="none"><button class="fx-menubar__item" role="menuitem" type="button">Çop etiş<kbd class="fx-menubar__kbd">Ctrl+P</kbd></button></li>
<li role="none"><button class="fx-menubar__item" role="menuitem" type="button" aria-disabled="true">Arxivga oliş</button></li>
</ul>
</li>
<li role="none" class="fx-menubar__entry">
<button class="fx-menubar__trigger" role="menuitem" type="button">Tahrir</button>
<ul class="fx-menubar__menu" role="menu">
<li role="none"><button class="fx-menubar__item" role="menuitem" type="button">Bekor qiliş<kbd class="fx-menubar__kbd">Ctrl+Z</kbd></button></li>
<li role="none"><button class="fx-menubar__item" role="menuitem" type="button">Qaytariş<kbd class="fx-menubar__kbd">Ctrl+Y</kbd></button></li>
<li role="separator" class="fx-menubar__sep"></li>
<li role="none"><button class="fx-menubar__item" role="menuitem" type="button" data-tone="danger">Ustunni öçiriş</button></li>
</ul>
</li>
<li role="none" class="fx-menubar__entry">
<button class="fx-menubar__trigger" role="menuitem" type="button">Köriniş</button>
<ul class="fx-menubar__menu" role="menu">
<li role="none"><button class="fx-menubar__item" role="menuitemcheckbox" type="button" aria-checked="true">Jami qatori</button></li>
<li role="none"><button class="fx-menubar__item" role="menuitemcheckbox" type="button" aria-checked="false">Grafik</button></li>
<li role="separator" class="fx-menubar__sep"></li>
<li role="none" class="fx-menubar__label" aria-hidden="true">Davr</li>
<li role="none"><ul class="fx-menubar__group" role="group" aria-label="Davr">
<li role="none"><button class="fx-menubar__item" role="menuitemradio" type="button" aria-checked="false">Kunlik</button></li>
<li role="none"><button class="fx-menubar__item" role="menuitemradio" type="button" aria-checked="true">Haftalik</button></li>
<li role="none"><button class="fx-menubar__item" role="menuitemradio" type="button" aria-checked="false">Oylik</button></li>
</ul></li>
</ul>
</li>
<li role="none" class="fx-menubar__entry">
<button class="fx-menubar__trigger" role="menuitem" type="button">Yordam</button>
<ul class="fx-menubar__menu" role="menu">
<li role="none"><button class="fx-menubar__item" role="menuitem" type="button">Qisqa tugmalar<kbd class="fx-menubar__kbd">?</kbd></button></li>
<li role="none"><button class="fx-menubar__item" role="menuitem" type="button">Qöllanma</button></li>
</ul>
</li>
</ul>
</nav>Tokenlar: --fx-bg-muted --fx-bg-pressed --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-ease-enter --fx-ease-exit --fx-ease-standard --fx-elevation-3 --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-motion-exit-fast --fx-motion-fast --fx-motion-shift-sm --fx-popover-width --fx-radius-control --fx-radius-nav --fx-radius-overlay --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-6 --fx-text-disabled --fx-text-error --fx-text-primary --fx-text-tertiary --fx-z-dropdown
Şu toifadan
Sarlavha havolasiHujjat sarlavhasi yonida «#» havolasi: ustiga kelganda yoki fokusda çiqadi, bosilsa şu bölimga manzil.Orqaga havolasiOta sahifaga qaytiş havolasi (#89): chevron + qisqa nom.Yuqoriga qaytişUzun sahifa yoki panelda bir ekrandan köp aylantirilgaç pastki burçakda çiqadigan tugma (4.151).Yöl satriBreadcrumbs: ota bölimlar xira havola, joriy sahifa asosiy rangda (aria-current), ajratgiç «/».Buyruqlar oynasiCtrl/⌘+K: hamma sahifa va amalni bir joydan qidiriş.Suhbatlar röyxatiMessenjer çap paneli: avatar (onlayn nuqta), nom, vaqt, oxirgi xabar va belgilar.