Komponent Pagination slúži na zobrazenie stránkovania v aplikáciách. Umožňuje používateľom navigovať medzi rôznymi stránkami obsahu a zlepšuje tak používateľskú skúsenosť pri prehliadaní veľkého množstva údajov.
Ukážka predstavuje najjednoduchšiu pagináciu s predvolenými ovládacími prvkami a zobrazením stránok.
Max pages
Ukážka obmedzuje počet naraz zobrazených stránok, takže je dobre vidieť skracovanie dlhšej paginácie.
Ukážka mení tvar prvkov paginácie na okrúhly variant, čo ovplyvní celkový vizuálny charakter navigácie.
Ukážka sa sústreďuje na tlačidlovú podobu paginácie, kde dominujú akcie predchádzajúcej a ďalšej stránky.
Ukážka dopĺňa k paginácii textové informácie o stave, napríklad aktuálnu stranu alebo rozsah výsledkov.
Ak má komponent menej ako 768 px (md), automaticky rozdelí výber počtu záznamov
a informáciu o rozsahu do súhrnného riadka a navigáciu zobrazí pod nimi. Používa
CSS container query, takže reaguje na vlastnú dostupnú šírku a nepotrebuje
responzívny atribút ani JavaScript.
Rozostupy a veľkosti je možné meniť cez CSS custom properties. Jednotlivé časti
sa dajú cielene štylovať cez ::part(), napríklad
wje-pagination::part(page-size-label) alebo
wje-pagination::part(page-button).
Použite wje-pagination pri zoznamoch a tabuľkách, ktorých výsledky sú rozdelené
na viac stránok. Komponent zobrazuje navigáciu, voliteľný rozsah výsledkov
a voliteľný výber počtu záznamov na stránke; načítanie dát zostáva zodpovednosťou
nadradenej aplikácie.
Nepoužívajte ho len ako vizuálny dekoratívny prvok bez interakcie. V takom prípade uprednostnite prezentačné komponenty.
Komponent používa navigačnú rolu, pomenované predchádzajúce a nasledujúce akcie
a aria-current="page" pre aktuálnu stránku. Ak je na jednej obrazovke viac
paginácií, nastavte každej zrozumiteľný aria-label.
Odporúčané postupy
- Pri veľkom počte stránok obmedzte počet viditeľných tlačidiel cez
max-pages.
- Pri načítavaní ďalšej stránky zabráňte opakovaným požiadavkám v nadradenej aplikácii.
- Pri úpravách vzhľadu preferujte CSS custom properties a shadow parts.
| Popis | Určuje, či je voľba hide-empty zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | hide-empty |
| Typ | boolean |
| Predvolené | false |
maxPages
| Popis | Nastavuje číselnú hodnotu používanú vo voľbe max-pages. |
| Atribút | max-pages |
| Typ | number｜string |
| Predvolené | 10 |
page
| Popis | Nastavuje textovú hodnotu uloženú vo voľbe page. |
| Atribút | page |
| Typ | string |
| Predvolené | 0 |
pageSize
| Popis | Nastavuje rozmery alebo veľkosť pre voľbu page-size. |
| Atribút | page-size |
| Typ | number｜string |
| Predvolené | 3 |
pageSizeOptions
| Popis | Nastavuje rozmery alebo veľkosť pre voľbu page-size-options. |
| Atribút | page-size-options |
| Typ | Array<number> |
| Predvolené | - |
| Popis | Určuje, či je voľba round zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | round |
| Typ | boolean |
| Predvolené | false |
| Popis | Určuje, či je voľba show-first-button zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | show-first-button |
| Typ | boolean |
| Predvolené | false |
| Popis | Určuje, či je voľba show-info zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | show-info |
| Typ | boolean |
| Predvolené | false |
| Popis | Určuje, či je voľba show-last-button zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | show-last-button |
| Typ | boolean |
| Predvolené | false |
showPageSizeOptions
| Popis | Nastavuje rozmery alebo veľkosť pre voľbu show-page-size-options. |
| Atribút | show-page-size-options |
| Typ | boolean |
| Predvolené | false |
| Popis | Nastavuje číselnú hodnotu používanú vo voľbe total-items. |
| Atribút | total-items |
| Typ | number |
| Predvolené | 0 |
| Názov | Popis |
|---|
wje-pagination:page-change | Vyvolá sa pri zmene stavu komponentu. |
| Popis | Vytvorí HTML štruktúru pre html pagination. |
| Signatúra | () => DocumentFragment |
| Popis | Vytvorí HTML štruktúru pre html stack buttons. |
| Signatúra | (paginateObj: object) => DocumentFragment |
| Názov | Popis |
|---|
native | Štýluje koreňovú shadow časť komponentu. |
summary | Štýluje shadow časť summary. |
page-size | Štýluje shadow časť page-size. |
page-size-label | Štýluje shadow časť page-size-label. |
page-size-select | Štýluje shadow časť page-size-select. |
info | Štýluje shadow časť info. |
pages | Štýluje shadow časť pages. |
page-button | Štýluje shadow časť page-button. |
page-number | Štýluje shadow časť page-number. |
current-page | Štýluje shadow časť current-page. |
first-button | Štýluje shadow časť first-button. |
previous-button | Štýluje shadow časť previous-button. |
next-button | Štýluje shadow časť next-button. |
last-button | Štýluje shadow časť last-button. |
dots | Štýluje shadow časť dots. |
| Názov | Popis |
|---|
--wje-pagination-gap | Vlastná CSS premenná, ktorá riadi gap. |
--wje-pagination-summary-gap | Vlastná CSS premenná, ktorá riadi summary gap. |
--wje-pagination-page-size-gap | Vlastná CSS premenná, ktorá riadi page size gap. |
--wje-pagination-mobile-gap | Vlastná CSS premenná, ktorá riadi mobile gap. |
--wje-pagination-page-size-width | Vlastná CSS premenná, ktorá riadi page size width. |
--wje-pagination-page-button-width | Vlastná CSS premenná, ktorá riadi page button width. |
--wje-pagination-page-button-gap | Gap between pagination buttons. |
Pre tento komponent nie sú dostupné žiadne sloty.