Navigatsiya · shell

Rels

Ilovaning eng yuqori bölimlari: çap çetdagi qoronği ustun (80), yuqorida belgi, papkalar — ikonka pill'da va yorliq (≤ 2 qator), tanlangani mavzu rangidagi pill va töldirilgan ikonka; pastda dumaloq tugmalar ustma-ust. Telefonda pastki panel. Karkas bilan: data-variant="rail" (S3). Kengaytma: data-tip (hover/fokusda izoh), [data-dot] (bildirişnoma nuqtasi). Telefonda bandlar köp bölsa (Fox OS 21.10): data-fx-rail data-max="5" — tor ekranda köpi bilan 5 band körinadi, data-pin bandlar (masalan oxirgi CRM) doim öz joyida, qolgani «Yana» varağida; joriy sahifa varaqda bölsa «Yana» tanlangan. Material va iOS qoidasi: pastki panelda 5 tadan köp band qöymang.

beta0.17.0 danyangilandi 0.96.0.fx-railCSS + JS

Anatomiya

  1. root.fx-railşart
  2. mark.fx-rail__markixtiyoriy
  3. item.fx-rail__itemşart
  4. icon.fx-rail__iconşart
  5. label.fx-rail__labelşart
  6. count.fx-rail__countixtiyoriy
  7. separator.fx-rail__sepixtiyoriy
  8. foot.fx-rail__footixtiyoriy
  9. button.fx-rail__btnixtiyoriy
  10. more.fx-rail__moreixtiyoriy
  11. sheet.fx-rail__sheetixtiyoriy
  12. pins.fx-rail__pinsixtiyoriy
  13. letter.fx-rail__ltrixtiyoriy

Holatlar

hovercurrentbutton-current

Klaviatura va kiriş

TugmaAmal
Tab, EnterPapkaga ötadi

<nav aria-label>; joriy papka aria-current="page"; belgi va tugmalarda aria-label; ikonkalar aria-hidden.

Naqş: WAI-ARIA APG landmarks · rol navigation

Kod

AI uçun: qaçon işlatiladi
Işlating
  • 3–6 ta katta bölimli ilova (Home, Atom, CRM…), har bölimning öz yon menyusi.
Işlatmang
  • Bitta bölimli ilova → nav
  • Relsga 6 tadan köp papka qöymang — panelda guruhlang.
  • Bir xil boşqaruvni relsda va tepa panelda takrorlamang (WDS r190).
npx foxui add rail
<nav class="fx-rail" aria-label="Bölimlar">
  <a class="fx-rail__mark" href="#" aria-label="Boş sahifa"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="6" fill="currentColor"/></svg></a>
  <a class="fx-rail__item" href="#"><span class="fx-rail__icon"><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-house"/></svg><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-house-fill"/></svg></span><span class="fx-rail__label">Home</span></a>
  <a class="fx-rail__item" href="#" aria-current="page"><span class="fx-rail__icon"><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-atom"/></svg><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-atom-fill"/></svg></span><span class="fx-rail__label">Atom</span></a>
  <a class="fx-rail__item" href="#"><span class="fx-rail__icon"><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-address-book"/></svg><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-address-book-fill"/></svg><span class="fx-rail__count">3</span></span><span class="fx-rail__label">CRM</span></a>
  <div class="fx-rail__foot"><button class="fx-rail__btn" type="button" aria-label="Rejim"><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-moon"/></svg></button></div>
</nav>
<!-- Telefonda 7 band: data-fx-rail — 5 tasi koʻrinadi (CRM data-pin bilan oxirida), qolgani «Yana» varagʻida -->
<nav class="fx-rail" data-fx-rail data-max="5" aria-label="Iş maydoni">
  <a class="fx-rail__item" href="#" aria-current="page"><span class="fx-rail__icon"><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-house"/></svg><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-house-fill"/></svg></span><span class="fx-rail__label">Bugun</span></a>
  <a class="fx-rail__item" href="#"><span class="fx-rail__icon"><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-check-square"/></svg><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-check-square-fill"/></svg></span><span class="fx-rail__label">Vazifa</span></a>
  <a class="fx-rail__item" href="#"><span class="fx-rail__icon"><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-robot"/></svg><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-robot-fill"/></svg></span><span class="fx-rail__label">Agentlar</span></a>
  <a class="fx-rail__item" href="#"><span class="fx-rail__icon"><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-check-circle"/></svg><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-check-circle-fill"/></svg></span><span class="fx-rail__label">Qarorlar</span></a>
  <a class="fx-rail__item" href="#"><span class="fx-rail__icon"><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-flag"/></svg><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-flag-fill"/></svg></span><span class="fx-rail__label">Reja</span></a>
  <a class="fx-rail__item" href="#"><span class="fx-rail__icon"><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-book-open"/></svg><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-book-open-fill"/></svg></span><span class="fx-rail__label">Bilim</span></a>
  <a class="fx-rail__item" href="#" data-pin><span class="fx-rail__icon"><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-address-book"/></svg><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-address-book-fill"/></svg></span><span class="fx-rail__label">CRM</span></a>
</nav>
<!-- Pinlar: ajratuvchi ostida (data-fx-railpins) — sudrab tartiblash, Alt + ↑/↓ -->
<nav class="fx-rail" aria-label="Pinlar bilan"><a class="fx-rail__item" href="#" aria-current="page"><span class="fx-rail__icon"><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-address-book"/></svg><svg viewBox="0 0 256 256" aria-hidden="true"><use href="#fx-i-address-book-fill"/></svg></span><span class="fx-rail__label">CRM</span></a><span class="fx-rail__sep" role="separator"></span><div class="fx-rail__pins" data-fx-railpins aria-label="Pinlar"><a class="fx-rail__item" href="#jadval" title="Buyurtmalar · Jadval"><span class="fx-rail__icon"><b class="fx-rail__ltr">B</b></span><span class="fx-rail__label">Buyurtmalar</span></a><a class="fx-rail__item" href="#qarz" title="Qarzlar"><span class="fx-rail__icon"><b class="fx-rail__ltr">Q</b></span><span class="fx-rail__label">Qarzlar</span></a></div></nav>

Tokenlar: --fx-bg-error-solid --fx-bg-muted --fx-bg-rail --fx-bg-rail-selected --fx-bg-subtle --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-sm --fx-duration-delay-tip --fx-ease-emphasized --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-fast --fx-motion-slow --fx-radius-badge --fx-radius-circle --fx-radius-control --fx-radius-overlay --fx-radius-surface --fx-shadow-lg --fx-shadow-sm --fx-size-avatar-lg --fx-size-icon-lg --fx-size-icon-md --fx-size-icon-sm --fx-size-rail --fx-size-status-dot-sm --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-on-rail --fx-text-on-rail-current --fx-text-on-rail-selected --fx-text-on-rail-strong --fx-text-primary --fx-text-tertiary

Ş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.
Libosni sozlangButun sayt şu zahoti kiyinadi

Libos

Premium liboslar — obunada: bepul 3 ta ustiga yana 13 ta. Bu yerda hammasini sinab körasiz. Narxlar

Brendlar ilhomida · 11

Faqat uslub ilhomi; belgilar — Simple Icons (CC0) va logobank.uz (Uzum), savdo belgilari egalariga tegişli.

Rejim
Qölda sozlaş — dasturçilar uçun

Rang

Şakl va çegara

Şrift juftligi

Qölda tanlaş

Qulaylik

Harakat
Ziçlik
Material (tajriba)