PageSelector

Component that renders a pagination control with buttons for navigating between pages. It displays the current page, allows selecting other pages, and emits events when a page is selected.

Props

Name	Description	Type	Default
buttonClasses	CSS classes to customize the prev/next buttons.	(string | Dictionary)[]	() => []
currentPage	The current page number.	number
hiddenPage	The string content of the hidden pages.	string	'...'
itemClasses	CSS classes to customize the page items.	(isSelected: boolean) => string | Dictionary | (string | Dictionary)[]	() => []
range	The number of pages to show before and after the current page.	number	2
scrollTarget	The class of the scroll container to scroll to top when a page is selected.	string	'main-scroll'
totalPages	The total number of pages.	number

Slots

Name	Description	Bindings (name - type - description)
previous-page-button		None
page-button
next-page-button		None

Events

This component emits the "UserSelectedAPage" and the UserClickedScrollToTop events by default.

See it in action

Basic example of how the component is rendered.

Customize the slots

This component allows to customise its content using slots.

Customize the number of pages to show before and after the current page by changing the range default value.