Navigatsiya · molecule

Saqlangan körinişlar

Röyxat sahifasi tepasida tayyor filtrlar qatori: «Hammasi 248 · Muddati ötgan 12 · Mening 31» — bosilsa jadval şu körinişga ötadi. Tab emas (panel yöq, jadval bitta): tugmalar, tanlangani aria-pressed; sonlar alohida belgi. «+» — yangi köriniş saqlaş (2.99-adjacent, PDP listpage__views). Havola bölsa (köriniş manzilda saqlanadi) — tanlangani aria-current="page".

beta0.23.0 danyangilandi 0.96.0.fx-viewsFaqat CSS

Variantlar

AtributQiymatlarStandart
data-toneerrorneutral

Anatomiya

  1. root.fx-viewsşart
  2. item.fx-views__itemşart
  3. count.fx-views__countixtiyoriy
  4. add.fx-views__addixtiyoriy

Holatlar

selectedhover

Klaviatura va kiriş

TugmaAmal
Tab, Enter, SpaceKörinişni tanlaydi

role="group" + aria-label; tanlangan köriniş aria-pressed="true"; son tugma matnining bir qismi, şuning uçun ekran öquvçi «Muddati ötgan 12» deb öqiydi.

Kod

AI uçun: qaçon işlatiladi
Işlating
  • Bitta jadvalning tayyor filtrlari (saqlangan körinişlar) orasida tez ötiş.
Işlatmang
  • Har bölimning öz paneli bor → tabs
  • 2–3 ta variantdan bittasi (filtrsiz) → segment
  • Panelli bölimlar uçun işlatmang — u fx-tabs.
  • 5–6 tadan köp körinişni qatorga qöymang — qolganini «Köproq» menyusiga.
  • Sonni faqat rang bilan farqlamang (muddati ötgan — qizil son, lekin nomi ham aniq).
npx foxui add views
<div class="fx-views" role="group" aria-label="Saqlangan körinişlar">
  <button class="fx-views__item" type="button" aria-pressed="true">Hammasi <span class="fx-views__count">248</span></button>
  <button class="fx-views__item" type="button" aria-pressed="false">Muddati ötgan <span class="fx-views__count" data-tone="error">12</span></button>
  <button class="fx-views__item" type="button" aria-pressed="false">Mening arizalarim <span class="fx-views__count">31</span></button>
  <button class="fx-views__item" type="button" aria-pressed="false">Tölanmagan <span class="fx-views__count">47</span></button>
  <button class="fx-btn fx-views__add" data-variant="ghost" data-size="sm" type="button">+ Köriniş saqlaş</button>
</div>

Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-error-subtle --fx-bg-muted --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-fg-error --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-motion-fast --fx-radius-badge --fx-radius-tag --fx-space-2 --fx-space-3 --fx-space-5 --fx-text-brand --fx-text-primary --fx-text-secondary --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)