Navigatsiya · compound
Telefon menyusi
Burger tugma oçadigan çapdan çiquvçi menyu varaği (#86): sarlavha + yopiş, havolalar, oçiladigan guruhlar (details), pastda amallar. Modal <dialog> — fokus içida qoladi, Esc va fonga bosiş yopadi, havola bosilsa yopiladi (foxui.js, data-fx-sitedrawer).
Anatomiya
- root
.fx-site-drawerşart - head
.fx-site-drawer__headixtiyoriy - body
.fx-site-drawer__bodyşart - link
.fx-site-drawer__linkixtiyoriy - group
.fx-site-drawer__groupixtiyoriy - sub
.fx-site-drawer__subixtiyoriy - foot
.fx-site-drawer__footixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Esc | Menyuni yopadi |
| Tab | Varaq içida aylanadi |
| Enter, Space | Guruhni oçadi / yopadi |
<dialog> + aria-label; showModal fokusni içida uşlaydi va Esc bilan yopadi; guruhlar — native details/summary.
Naqş: WAI-ARIA APG dialog-modal · rol dialog
Kod
AI uçun: qaçon işlatiladi
npx foxui add site-drawer
<button class="fx-btn" commandfor="site-drawer" command="show-modal" aria-label="Menyu">Menyu</button>
<dialog class="fx-site-drawer" id="site-drawer" aria-label="Asosiy menyu" data-fx-sitedrawer>
<div class="fx-site-drawer__head"><span>Çorsu</span><button class="fx-close" type="button" commandfor="site-drawer" command="close" aria-label="Yopiş"></button></div>
<nav class="fx-site-drawer__body" aria-label="Asosiy">
<details class="fx-site-drawer__group">
<summary>Mahsulot</summary>
<div class="fx-site-drawer__sub">
<a class="fx-site-drawer__link" href="#">Onlayn dökon</a>
<a class="fx-site-drawer__link" href="#">CRM</a>
</div>
</details>
<a class="fx-site-drawer__link" href="#" aria-current="page">Narxlar</a>
<a class="fx-site-drawer__link" href="#">Hujjatlar</a>
</nav>
<div class="fx-site-drawer__foot"><a class="fx-btn" href="#">Kiriş</a><a class="fx-btn" data-variant="primary" href="#">Boşlaş</a></div>
</dialog>Tokenlar: --fx-bg-muted --fx-bg-overlay --fx-bg-page --fx-bg-pressed --fx-bg-subtle --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-ease-enter --fx-ease-exit --fx-ease-standard --fx-font-size-md --fx-font-size-sm --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-base --fx-motion-exit-base --fx-motion-fast --fx-motion-shift-lg --fx-popover-width --fx-radius-nav --fx-shadow-lg --fx-size-control-lg --fx-size-control-md --fx-size-icon-sm --fx-size-topbar --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-8 --fx-text-primary --fx-text-secondary --fx-text-tertiary