Navigatsiya · molecule
Sahifalaş
Jadval ostida: «1–20 / 248» va oldingi/keyingi; kerak bölsa sahifa raqamlari (joriysi brend tusi), oraliq «…». Variantlar: minimal (faqat ‹ ›), sahifa hajmi tanlovi (native select), «Yana yuklaş» (cursor/çeksiz röyxat, körsatilgani çiziği bilan).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | numberedminimal Faqat «1–20 / 248» va ‹ ›more «Yana yuklaş» tugmasi, cursor röyxat | numbered |
Anatomiya
- root
.fx-paginationşart - info
.fx-pagination__infoixtiyoriy - page
.fx-pagination__pageşart - gap
.fx-pagination__gapixtiyoriy - size
.fx-pagination__sizeixtiyoriy - more
.fx-pagination__moreixtiyoriy
Holatlar
currentdisabled
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Enter | Sahifaga ötadi |
<nav aria-label>; joriysi aria-current="page"; strelkalarda aria-label.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Köp sahifali jadval yoki röyxat.
Işlatmang
- Çeksiz lenta →
list - 10 tadan köp sahifa raqamini qatorga yozmang — «…».
- «Yana yuklaş» bilan sahifa raqamini aralaştirmang — yoki cursor, yoki raqam.
- Sahifa hajmi tanlovini 3–4 qiymatdan oşirmang (20 · 50 · 100).
npx foxui add pagination
<nav class="fx-pagination" aria-label="Sahifalar">
<span class="fx-pagination__info">1–20 / 248</span>
<a class="fx-pagination__page" aria-disabled="true" aria-label="Oldingi">‹</a>
<a class="fx-pagination__page" href="#" aria-current="page">1</a>
<a class="fx-pagination__page" href="#">2</a>
<span class="fx-pagination__gap">…</span>
<a class="fx-pagination__page" href="#">13</a>
<a class="fx-pagination__page" href="#" aria-label="Keyingi">›</a>
</nav>
<!-- Minimal + sahifa hajmi -->
<nav class="fx-pagination" data-variant="minimal" aria-label="Sahifalar (minimal)">
<span class="fx-pagination__info" aria-live="polite">1–20 / 248</span>
<label class="fx-pagination__size">Sahifada <select class="fx-select" data-size="sm" aria-label="Sahifadagi qatorlar soni"><option>20</option><option>50</option><option>100</option></select></label>
<a class="fx-pagination__page" aria-disabled="true" aria-label="Oldingi"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M10 3.5 5.5 8 10 12.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
<a class="fx-pagination__page" href="#" aria-label="Keyingi"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 3.5 10.5 8 6 12.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
</nav>
<!-- Yana yuklash -->
<nav class="fx-pagination" data-variant="more" aria-label="Yana yuklaş">
<div class="fx-pagination__more">
<span class="fx-pagination__info" aria-live="polite">248 tadan 40 tasi körsatildi</span>
<div class="fx-progress" data-size="xs" role="progressbar" aria-label="Körsatilgan uluş" aria-valuenow="16" aria-valuemin="0" aria-valuemax="100" style="--fx-progress-value: 16%"></div>
<button class="fx-btn" type="button">Yana 20 tasini yuklaş</button>
</div>
</nav>Tokenlar: --fx-bg-brand-subtle --fx-bg-muted --fx-bg-pressed --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-font-size-sm --fx-font-weight-semibold --fx-knob-pill --fx-popover-width --fx-radius-control --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-brand --fx-text-disabled --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.