Qatlamlar · compound
Menyu
Tugma ostida oçiladigan amallar röyxati: bandlar, guruh sarlavhasi, ajratgiç, tugmalar maslahati, xavfli band, belgilanadigan bandlar. Native popover + foxui.js (klaviatura). Içki menyu (→ bilan oçiladi) va menyu içida qidiruv ham bor. Moslaşuvçi (4.26): data-fx-adaptive — telefonda (< 640 px) pastki varaqqa aylanadi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-fx-adaptive | true telefonda pastki varaq | — |
Anatomiya
- root
.fx-menuşart - item
.fx-menu__itemşart - kbd
.fx-menu__kbdixtiyoriy - title
.fx-menu__titleixtiyoriy - separator
.fx-menu__sepixtiyoriy - submenu wrapper
.fx-menu__subwrapixtiyoriy - submenu
.fx-menu__subixtiyoriy - search
.fx-menu__searchixtiyoriy - empty
.fx-menu__emptyixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space, ↓ | Trigger: oçadi, birinçi bandga fokus |
| ↑ ↓ | Bandlar böylab |
| Home, End | Birinçi / oxirgi band |
| Harf | Şu harfdan boşlanadigan bandga |
| Esc | Yopadi, fokus triggerga |
| →, Enter, Space | Içki menyuni oçadi, birinçi bandga fokus |
| ←, Esc | Içki menyuni yopadi, fokus ota bandga |
| ↓ (qidiruvdan) | Birinçi bandga |
Trigger: aria-haspopup="menu"; bandlar role="menuitem" / menuitemcheckbox / menuitemradio. Klaviatura foxui.js'da. Içki menyu: ota band aria-haspopup="menu" + aria-expanded. Qidiruv: input menyu içida, ↓ bandlarga ötadi.
Naqş: WAI-ARIA APG menu-button · rol menu
Kod
AI uçun: qaçon işlatiladi
- Qator amallari, «Yana» tugmasi, foydalanuvçi menyusi.
- Sahifa navigatsiyasi →
nav - Forma maydonida qiymat tanlaş →
select - Menyuga forma yoki uzun matn qöymang — popover yoki dialog.
- Bitta bandli menyu qilmang — oddiy tugma.
- Içki menyuni ikki bosqiçdan çuqur qilmang — murakkab tanlov uçun dialog yoki buyruqlar oynasi.
- Qidiruvni 7 tagaça bandli menyuga qöymang — keraksiz.
npx foxui add menu
<button class="fx-btn" popovertarget="m1" aria-haspopup="menu">Amallar</button>
<div class="fx-menu" id="m1" role="menu" popover data-fx-menu>
<button class="fx-menu__item" role="menuitem">Tahrirlaş <span class="fx-menu__kbd">E</span></button>
<button class="fx-menu__item" role="menuitem">Nusxa oliş <span class="fx-menu__kbd">Ctrl+D</span></button>
<hr class="fx-menu__sep">
<div class="fx-menu__title" role="presentation">Köriniş</div>
<button class="fx-menu__item" role="menuitemcheckbox" aria-checked="true">Ixçam</button>
<hr class="fx-menu__sep">
<button class="fx-menu__item" role="menuitem" data-tone="danger">Öçiriş</button>
</div>
<button class="fx-btn" popovertarget="m2" aria-haspopup="menu">Içki menyu + qidiruv</button>
<div class="fx-menu" id="m2" role="menu" popover data-fx-menu>
<input class="fx-menu__search" type="search" placeholder="Amalni qidiring" aria-label="Menyuda qidiriş" autocomplete="off">
<button class="fx-menu__item" role="menuitem">Oçiş</button>
<div class="fx-menu__subwrap">
<button class="fx-menu__item" role="menuitem" aria-haspopup="menu" aria-expanded="false">Papkaga köçiriş</button>
<div class="fx-menu__sub" role="menu" hidden>
<button class="fx-menu__item" role="menuitem">Mijozlar</button>
<button class="fx-menu__item" role="menuitem">Arxiv</button>
</div>
</div>
<button class="fx-menu__item" role="menuitem">Nusxa oliş</button>
<p class="fx-menu__empty" hidden>Heç narsa topilmadi</p>
</div>
<!-- Moslashuvchi (4.26): telefonda pastki varaq -->
<button class="fx-btn" popovertarget="m-adapt" aria-haspopup="menu">Amallar</button>
<div class="fx-menu" id="m-adapt" role="menu" popover data-fx-menu data-fx-adaptive>
<button class="fx-menu__item" role="menuitem">Tahrirlaş</button>
<button class="fx-menu__item" role="menuitem">Nusxa oliş</button>
<button class="fx-menu__item" role="menuitem" data-tone="danger">Öçiriş</button>
</div>Tokenlar: --fx-bg-muted --fx-bg-overlay --fx-bg-pressed --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-control-h-sm --fx-ease-enter --fx-ease-exit --fx-ease-sheet --fx-font-adjust-mono --fx-font-family-mono --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-motion-base --fx-motion-exit-fast --fx-motion-scale-enter --fx-motion-shift-sm --fx-motion-slow --fx-popover-width --fx-radius-circle --fx-radius-nav --fx-radius-overlay --fx-shadow-lg --fx-size-icon-sm --fx-size-touch-target --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-8 --fx-text-brand --fx-text-disabled --fx-text-error --fx-text-primary --fx-text-tertiary