Navigatsiya · molecule
Oldingi / keyingi
Hujjat va maqola oxiridagi ikki katta havola (#88): oldingi (çapda) va keyingi (öngda) sahifa nomi bilan. Bittasi bölmasa ikkinçisi öz joyida qoladi. Raqamli sahifalaş uçun — pagination.
Anatomiya
- root
.fx-pagerşart - link
.fx-pager__linkşart - label
.fx-pager__labelixtiyoriy - title
.fx-pager__titleixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Enter | Sahifaga ötadi |
<nav aria-label>; havolalarda rel="prev"/"next"; yorliq va nom bitta havola içida — ekran öquvçi ikkisini ham öqiydi.
Naqş: WAI-ARIA APG link · rol navigation
Kod
AI uçun: qaçon işlatiladi
- Ketma-ket hujjat sahifalari, qöllanma qadamlari, maqolalar.
- Röyxat sahifalari (1, 2, 3…) →
pagination - Faqat ota sahifaga qaytiş →
back-link - Yorliqqa «1, 2, 3» yozmang — sahifa nomi; raqamlar uçun pagination.
- Ikkita havolani bir-biriga öxşatmang — keyingisi öngda (rel="next").
npx foxui add pager
<nav class="fx-pager" aria-label="Sahifalar"> <a class="fx-pager__link" rel="prev" href="#"><span class="fx-pager__label">Oldingi</span><span class="fx-pager__title">Örnatiş</span></a> <a class="fx-pager__link" rel="next" href="#"><span class="fx-pager__label">Keyingi</span><span class="fx-pager__title">Mavzularni sozlaş</span></a> </nav>
Tokenlar: --fx-bg-subtle --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-size-md --fx-font-size-xs --fx-font-weight-medium --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-surface --fx-space-1 --fx-space-10 --fx-space-4 --fx-text-brand --fx-text-primary --fx-text-tertiary