Karkas · shell
Ilova karkasi
Ilova sahifasi qobiği: çapda yon menyu (256, yiğilganda 60), tepada panel (60) — yiğiş tugmasi, yöl satri, global amallar; iş maydoni. < 840 px: menyu çapdan çiqadigan varaq. Xulq foxui.js'da (data-fx-shell): tugma va Ctrl/⌘+B. Rels varianti (data-variant="rail", WDS S3): çapda rels (.fx-shell__rail içida .fx-rail), yonida bölim paneli — yiğilganda panel yöqoladi, rels qoladi; telefonda rels pastki panel; data-mobile="top" — telefonda faqat tepa panel (rels yaşiriladi, bölimlar butun ekran yon varaq boşida, Cursor kabi). Öng yordamçi panel (2.139): .fx-shell__aside — tafsilot/izoh/faollik, [data-fx-shell-aside-toggle] bilan oçiladi-yopiladi; torda öngdan çiqadigan varaq. Suzuvçi va içki variantlar (4.157, shadcn): data-variant="floating" — yon menyu sahifa çetidan ajralgan karta; data-variant="inset" — yon menyu fonda, tepa panel va iş maydoni bitta yumaloq yuza içida (iş maydoni özi aylanadi). Torda ikkalasi ham oddiy varaqqa qaytadi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | sidebar S1rail S3 — rels + yaşiriladigan panelfloating yon menyu — ajralgan kartainset iş maydoni — içki yumaloq yuza | sidebar |
data-mobile | bottom telefonda rels — pastki paneltop telefonda faqat tepa panel; rels yaşiriladi, bölimlar yon varaq boşida (.fx-shell__sections) | bottom |
Anatomiya
- root
.fx-shellşart - side
.fx-shell__sideşart - brand
.fx-shell__brandixtiyoriy - brand-name
.fx-shell__brand-nameixtiyoriy - top
.fx-shell__topşart - spacer
.fx-shell__spacerixtiyoriy - main
.fx-shell__mainşart - rail
.fx-shell__railixtiyoriy - aside (öng panel)
.fx-shell__asideixtiyoriy - sections
.fx-shell__sectionsixtiyoriy - close
.fx-shell__closeixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Ctrl/⌘ + B | Menyuni yiğadi / yoyadi (torda — varaqni oçadi) |
| Esc | Torda varaqni yopadi |
| Esc | Torda öng panelni yopadi |
Yiğiş tugmasida aria-label va aria-expanded; yiğilganda bandlar nomi aria-label/title'da (foxui.js). <main> bitta.
Kod
AI uçun: qaçon işlatiladi
- Bir neçta bölimli ilova: CRM, kabinet, admin.
- Brend kabinet yoki marketing körinişidagi ilova — yon menyu karta (floating) yoki iş maydoni ajralgan yuza (inset) bölsin deyilganda.
- Marketing sayt yoki hujjat sahifasi →
page - Sahifa amallarini tepa panelga qöymang — sahifa sarlavhasida.
- Yon menyuni karta (oq blok) içiga olmang — sahifa fonida.
- floating / inset variantni CRM va admin'ning standarti qilmang — WDS: yon menyu sahifa fonida; bu variantlar brend sayt yoki mijoz talabi uçun.
npx foxui add shell
<div class="fx-shell" data-fx-shell>
<aside class="fx-shell__side" id="side" popover="auto">
<div class="fx-shell__brand"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5" fill="currentColor"/></svg><span class="fx-shell__brand-name">FoxUI</span></div>
<nav class="fx-nav" aria-label="Asosiy">
<div class="fx-nav__group">
<a class="fx-nav__item" href="#" aria-current="page"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 9.5 10 4l7 5.5V16a1 1 0 0 1-1 1h-3.5v-4.5h-5V17H4a1 1 0 0 1-1-1z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="fx-nav__label">Boş sahifa</span></a>
<a class="fx-nav__item" href="#"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 11h4l1 2h4l1-2h4M4 5h12l1 6v5H3v-5z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="fx-nav__label">Arizalar</span><span class="fx-nav__count">12</span></a>
</div>
<div class="fx-nav__group">
<div class="fx-nav__title">Mijozlar</div>
<a class="fx-nav__item" href="#"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M7 9a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM2 17c0-3 2.2-5 5-5s5 2 5 5M13 4a3 3 0 0 1 0 6M15 12c1.8.5 3 2.3 3 5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="fx-nav__label">Hammasi</span></a>
<div class="fx-nav__subs">
<a class="fx-nav__item" href="#"><span class="fx-nav__label">Obunaçilar</span></a>
<a class="fx-nav__item" href="#"><span class="fx-nav__label">Juda uzun nomli bölim nomi şu yerda kesiladi</span></a>
</div>
</div>
<div class="fx-nav__foot"><a class="fx-nav__item" href="#"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM10 2v2M10 16v2M2 10h2M16 10h2M4.3 4.3l1.4 1.4M14.3 14.3l1.4 1.4M4.3 15.7l1.4-1.4M14.3 5.7l1.4-1.4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg><span class="fx-nav__label">Sozlamalar</span></a></div>
</nav>
</aside>
<header class="fx-shell__top">
<button class="fx-btn" data-variant="ghost" data-shape="icon" data-fx-shell-toggle aria-label="Menyu" aria-expanded="true"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M3 5h14M3 10h14M3 15h14" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
<ol class="fx-breadcrumbs"><li><a href="#">Mijozlar</a></li><li><span aria-current="page">Hammasi</span></li></ol>
<span class="fx-shell__spacer"></span>
<button class="fx-btn" data-variant="ghost" data-fx-shell-aside-toggle aria-controls="shell-aside" aria-expanded="false">Tafsilot</button>
</header>
<main class="fx-shell__main">Iş maydoni</main>
<aside class="fx-shell__aside" aria-label="Tafsilot" id="shell-aside" hidden><strong>Tafsilot</strong><p>Tanlangan qator haqida izoh va faollik.</p></aside>
</div>Tokenlar: --fx-bg-brand-subtle --fx-bg-overlay --fx-bg-page --fx-bg-subtle --fx-bg-surface --fx-bg-surface-container --fx-bg-surface-container-low --fx-border-color-default --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-elevation-1 --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-popover-width --fx-radius-control --fx-radius-surface --fx-shadow-lg --fx-size-icon-lg --fx-size-icon-md --fx-size-topbar --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-primary --fx-text-secondary