Pagination

The Pagination component is used to display pagination in applications. It allows users to navigate between different pages of content, improving the user experience when browsing large amounts of data.

Basic use

The sample represents the simplest pagination with default controls and page view.

Max pages

The preview limits the number of pages displayed at a time, so you can clearly see the truncation of longer pagination.

Round

The preview changes the shape of the pagination elements to a round variant, which will affect the overall visual character of the navigation.

First, Last Buttons

The demonstration focuses on the button form of pagination, where the actions of the previous and next page dominate.

Show info

The preview adds textual status information to the pagination, such as the current page or range of results.

When to use

Use wje-pagination when the user enters a value, selects options, or performs an action on a form.

When not to use

Don't just use it as a visual decorative element without interaction. In this case, give priority to the presentation components.

Accessibility

Always link the component to the description (label/aria-label), keep keyboard control, and display a clear message on validation errors.

Recommended practices

• Keep validation rules and error states consistent across the entire form.
• For asynchronous operations, display the load status or disabled status.
• For complex forms, prefer smaller sections and immediate feedback.

Attributes and properties

hideEmpty

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é	-

round

Popis	Určuje, či je voľba round zapnutá a ovplyvňuje správanie komponentu.
Atribút	round
Typ	boolean
Predvolené	false

showFirstButton

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

showInfo

Popis	Určuje, či je voľba show-info zapnutá a ovplyvňuje správanie komponentu.
Atribút	show-info
Typ	boolean
Predvolené	false

showLastButton

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

totalItems

Popis	Nastavuje číselnú hodnotu používanú vo voľbe total-items.
Atribút	total-items
Typ	number
Predvolené	0

Events

Názov	Popis
wje-pagination:page-change	Vyvolá sa pri zmene stavu komponentu.

Methods

htmlPagination

Popis	Vytvorí HTML štruktúru pre html pagination.
Signatúra	() => DocumentFragment

htmlStackButtons

Popis	Vytvorí HTML štruktúru pre html stack buttons.
Signatúra	(paginateObj: object) => DocumentFragment

CSS shadow parts

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.

CSS custom variables

Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.

Slots

Pre tento komponent nie sú dostupné žiadne sloty.