Qatlamlar · compound
Kontekst menyu
Öng tugma, uzoq bosiş (telefon) yoki Shift+F10 / Menu tugmasi bilan kursor joyida oçiladigan menyu (4.147). Menyu — oddiy fx-menu (bandlar, ajratgiç, xavfli amal, klaviatura); bu komponent hudud, nişon qatorni belgilaş, joylaşuv va fokusni qaytarişni beradi. CRM röyxati, fayllar, kanban kartalari uçun.
Anatomiya
- root
.fx-contextmenuşart - target
.fx-contextmenu__targetixtiyoriy - menu
.fx-contextmenu__menuşart - hint
.fx-contextmenu__hintixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Shift+F10, ContextMenu | Fokusdagi nişon uçun menyuni oçadi |
| ↑ ↓, Home, End | Menyu bandlari (fx-menu) |
| Enter / Boʻsh joy | Amalni bajaradi va yopadi |
| Esc | Yopadi, fokus nişonga qaytadi |
Hudud yoki nişon fokus oladi (tabindex=0); Shift+F10 va ContextMenu tugmasi menyuni fokusdagi nişon ostida oçadi; menyu APG «Menu» (fx-menu): fokus birinçi bandga, ↑ ↓ Home End, Esc yopadi va fokus nişonga qaytadi. Oçiq nişon data-context-open bilan belgilanadi (fon + çiziq).
Naqş: WAI-ARIA APG menu-button · rol menu
Kod
AI uçun: qaçon işlatiladi
- Röyxat qatori, karta yoki fayl ustida tezkor amallar (oçiş, nusxa, arxivlaş) — tajribali foydalanuvçi uçun qisqa yöl.
- Tugma bosilganda oçiladigan menyu →
menu - Tanlangan bir neçta qatorga amallar →
bulkbar - Kontekst menyuni yagona yöl qilmang — öşa amallar körinadigan tugma yoki «…» menyusida ham bölsin.
- Brauzer menyusi kerak böladigan joyda (matn maydoni, havola) işlatmang.
- 10 dan köp band bermang — guruhlab ajratgiç qöying yoki içki menyu.
npx foxui add contextmenu
<div class="fx-contextmenu" data-fx-contextmenu data-menu="cm-mijoz" aria-describedby="cm-hint">
<p class="fx-contextmenu__hint" id="cm-hint">Qatorda öng tugma, uzoq bosiş yoki Shift+F10 — amallar menyusi.</p>
<ul style="list-style:none;margin:0;padding:0;display:grid;gap:var(--fx-space-1)">
<li class="fx-contextmenu__target" tabindex="0" data-id="1" style="display:flex;justify-content:space-between;gap:var(--fx-space-4);padding:var(--fx-space-2) var(--fx-space-3)"><b>Aziz Karimov</b><span>Yangi ariza</span></li>
<li class="fx-contextmenu__target" tabindex="0" data-id="2" style="display:flex;justify-content:space-between;gap:var(--fx-space-4);padding:var(--fx-space-2) var(--fx-space-3)"><b>Shahnoza Olimova</b><span>Tölov kutilmoqda</span></li>
<li class="fx-contextmenu__target" tabindex="0" data-id="3" style="display:flex;justify-content:space-between;gap:var(--fx-space-4);padding:var(--fx-space-2) var(--fx-space-3)"><b>Bobur Rahimov</b><span>Şartnoma yuborildi</span></li>
</ul>
</div>
<div class="fx-menu" id="cm-mijoz" role="menu" aria-label="Mijoz amallari" popover data-fx-menu>
<button class="fx-menu__item" role="menuitem">Oçiş</button>
<button class="fx-menu__item" role="menuitem">Qönğiroq qiliş</button>
<button class="fx-menu__item" role="menuitem">Mas'ul tayinlaş</button>
<div class="fx-menu__sep" role="separator"></div>
<button class="fx-menu__item" role="menuitem" data-tone="danger">Arxivlaş</button>
</div>Tokenlar: --fx-bg-muted --fx-border-color-focus --fx-border-color-strong --fx-border-width-focus --fx-ease-standard --fx-font-size-xs --fx-motion-fast --fx-radius-control --fx-radius-surface --fx-space-1 --fx-text-tertiary