Navigatsiya · molecule
Dock
Ilovalar yoki bölimlar uçun ikonlar qatori (4.76): kursor ostidagi ikon kattalaşadi, qöşnilari ozroq (macOS Dock kabi), klaviatura fokusida ham. Faqat CSS (:has bilan qöşnilar). Har bandda tepada çiqadigan yorliq, joriy sahifa — pastda nuqta (aria-current). Barmoqli qurilmada, harakat kamaytirilganda va data-magnify="off" da — oddiy tugmalar qatori.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | sm | md |
data-magnify | off kattalaşiş yöq | on |
data-color | bluegreenyellowpinkpurplebrand | muted |
Anatomiya
- root
.fx-dockşart - item
.fx-dock__itemşart - label
.fx-dock__labelşart - separator
.fx-dock__sepixtiyoriy
Holatlar
hoverfocuscurrent
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab / Shift+Tab | Bandlar böylab; fokusdagi band kattalaşadi va yorliği çiqadi |
| Enter | Bölimni oçadi |
nav + ul röyxati; har band — haqiqiy havola yoki tugma, yorliği matnda (fx-dock__label — hover va fokusda körinadi, ekran öquvçi doim öqiydi). Joriy band aria-current="page" — nuqta bilan (rang yolğiz emas). Tab bilan yuriladi, fokus halqasi körinadi.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Landing sahifasida mahsulot modullari yoki ilovalar namoyişi.
- Işxona/launcher sahifasida tez-tez oçiladigan bölimlar.
Işlatmang
- Vositalar qatori (tahrirlaş amallari) →
toolbar - Ilova asosiy menyusi →
shell - Asosiy navigatsiyani faqat Dock'ga qoldirmang — yorliqsiz ikonlarni hamma tuşunmaydi; sayt yoki ilova menyusi alohida bölsin.
- 8–10 tadan köp band qöymang.
- Kattalaşişni har kiçik ikon qatoriga (toolbar) qöllamang — bu landing va launcher uçun.
npx foxui add dock
<div style="display:grid;place-items:center;padding:var(--fx-space-12) var(--fx-space-4) var(--fx-space-6)"> <nav aria-label="Tezkor bölimlar" style="max-inline-size:100%;min-inline-size:0"><ul class="fx-dock"> <li><a class="fx-dock__item" href="#" aria-current="page"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z"/></svg><span class="fx-dock__label">Boş sahifa</span></a></li> <li><a class="fx-dock__item" href="#" data-color="blue"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M216,48H40a8,8,0,0,0-8,8V208a16,16,0,0,0,16,16H88a16,16,0,0,0,16-16V160h48v16a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V56A8,8,0,0,0,216,48ZM88,208H48V128H88Zm0-96H48V64H88Zm64,32H104V64h48Zm56,32H168V128h40Zm0-64H168V64h40Z"/></svg><span class="fx-dock__label">Bitimlar</span></a></li> <li><a class="fx-dock__item" href="#" data-color="green"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"/></svg><span class="fx-dock__label">Mijozlar</span></a></li> <li><a class="fx-dock__item" href="#" data-color="pink"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-6.54-.67L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Z"/></svg><span class="fx-dock__label">Xabarlar</span></a></li> <li><a class="fx-dock__item" href="#" data-color="yellow"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M208,32H184V24a8,8,0,0,0-16,0v8H88V24a8,8,0,0,0-16,0v8H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM72,48v8a8,8,0,0,0,16,0V48h80v8a8,8,0,0,0,16,0V48h24V80H48V48ZM208,208H48V96H208V208Z"/></svg><span class="fx-dock__label">Kalendar</span></a></li> <li><a class="fx-dock__item" href="#" data-color="purple"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M224,200h-8V40a8,8,0,0,0-8-8H152a8,8,0,0,0-8,8V80H96a8,8,0,0,0-8,8v40H48a8,8,0,0,0-8,8v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16ZM160,48h40V200H160ZM104,96h40V200H104ZM56,144H88v56H56Z"/></svg><span class="fx-dock__label">Hisobotlar</span></a></li> <li class="fx-dock__sep" role="separator"></li> <li><a class="fx-dock__item" href="#"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A112.1,112.1,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.62a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.08,8.08,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8.08,8.08,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z"/></svg><span class="fx-dock__label">Sozlamalar</span></a></li> <li><a class="fx-dock__item" href="#"><svg viewBox="0 0 256 256" aria-hidden="true"><path d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"/></svg><span class="fx-dock__label">Qidiruv</span></a></li> </ul></nav> </div>
Tokenlar: --fx-bg-brand-solid --fx-bg-category-blue --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-muted --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-lg --fx-control-h-md --fx-control-h-sm --fx-ease-spring --fx-ease-standard --fx-font-size-xs --fx-motion-base --fx-motion-fast --fx-motion-press --fx-motion-shift-sm --fx-radius-badge --fx-radius-circle --fx-radius-overlay --fx-radius-surface --fx-shadow-lg --fx-size-icon-lg --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-on-brand --fx-text-on-category --fx-text-primary
Ş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.