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.
Použite wje-pagination, keď používateľ zadáva hodnotu, vyberá možnosti alebo vykonáva akciu vo formulári.
Nepoužívajte ho len ako vizuálny dekoratívny prvok bez interakcie. V takom prípade uprednostnite prezentačné komponenty.
Vždy prepojte komponent s popisom (label/aria-label), zachovajte ovládanie klávesnicou a pri validačných chybách zobrazte zrozumiteľnú správu.
Odporúčané postupy
- Majte jednotné validačné pravidlá a error stavy naprieč celým formulárom.
- Pri asynchrónnych operáciách zobrazte stav načítania alebo disabled stav.
- Pri zložitých formulároch preferujte menšie sekcie a okamžitú spätnú väzbu.
| 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. |
Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.
Pre tento komponent nie sú dostupné žiadne sloty.