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.

Responsive layout

When the component is narrower than 768 px (md), it automatically separates the page-size selector and item range into a summary row and places page navigation below it. A CSS container query makes the component respond to its own available width without a responsive attribute or JavaScript.

Spacing and dimensions can be changed with CSS custom properties. Individual elements can be targeted with ::part(), for example wje-pagination::part(page-size-label) or wje-pagination::part(page-button).

When to use

Use wje-pagination for lists and tables whose results are divided into multiple pages. It renders navigation, an optional item range, and an optional page-size selector; loading the data remains the parent application's responsibility.

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

The component uses a navigation role, named previous and next actions, and aria-current="page" for the active page. When multiple paginations appear on the same screen, give each one a descriptive aria-label.

Recommended practices

• Limit the number of visible page buttons with max-pages for large result sets.
• Prevent duplicate requests in the parent application while a page is loading.
• Prefer CSS custom properties and shadow parts when changing the appearance.

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

CSS custom variables

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.

Slots

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