Light Dark System
Get ready for more awesome! Web Awesome, the next iteration of Shoelace, is on Kickstarter. Read Our Story

Pagination

<sl-pagination> | SlPagination
since ViUR 0.5 experimental 

<sl-pagination id='page-btn-DIV' total='2120' page-size='20' value='1'></sl-pagination>

Examples

Simple Pagination 

<sl-pagination id='page-btn-DIV2' total='2120' page-size='20' value='1'></sl-pagination>
<script > 
   let pageBtn=document.querySelector('#page-btn-DIV2');
   pageBtn.simple=true;
</script>

Full Pagination 

<sl-pagination id='page-btn-DIV3' total='2120' page-size='20' value='1'></sl-pagination>
<script > 
   let pageBtn=document.querySelector('#page-btn-DIV3');
     pageBtn.showFirst=true; //Show first page shortcut button
     pageBtn.showLast=true; //Show last page shortcut button
     pageBtn.showSizeChange=true; //Show resize paging select
     pageBtn.showPageChange=true; //Show direct jump to a page with an input
</script>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@viur/shoelace@1.0.16-v2.20.1/cdn/components/pagination/pagination.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@viur/shoelace@1.0.16-v2.20.1/cdn/components/pagination/pagination.js';

To import this component using a bundler:

import '@viur/shoelace/dist/components/pagination/pagination.js';

To import this component as a React component:

import SlPagination from '@viur/shoelace/dist/react/pagination';

Slots

Name Description
prefix Content before the navigation.
no-data Custom empty state content (shown when total=0).
first-icon Icon inside the first-page button.
prev-icon Icon inside the previous-page button.
next-icon Icon inside the next-page button.
last-icon Icon inside the last-page button.
(default) Content after the navigation (e.g. toolbar extras).

Learn more about using slots.

Properties

Name Description Reflects Type Default
value Current page number 1
pageSize
page-size 		Page Break Size number 20
showSizeChange
show-size-change 		Whether to resize the paging component boolean false
showPageChange
show-page-change 		Whether to allow direct adjustment of the first few pages boolean false
simple Allowed or not Simplified paging mode boolean false
align Layout alignment 'left' | 'right' | 'center' 'right'
total Total number of sizes number -
pageSizeOptions Support for resized pagination Array -
showFirst Whether to display Jump directly to the first page boolean false
showLast Show or not Show Jump directly to the last page boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-page-change onSlPageChange Emitted when current page changed. -
sl-page-before-change onSlPageBeforeChange Emitted before page changed, can be defaultPrevented to cancel. -

Learn more about events.

Parts

Name Description
base The component’s base wrapper.
no-data The no-data message container.
pageWrap The page number buttons wrapper.
first-button The first-page navigation button.
prev-button The previous-page navigation button.
next-button The next-page navigation button.
last-button The last-page navigation button.
first The icon inside the first-page button.
prev The icon inside the previous-page button.
next The icon inside the next-page button.
last The icon inside the last-page button.
page-button Every page number button.
active-page-button The currently active page number button (combined with page-button).
page-jump The page number input (simple mode or showPageChange).
page The “von X” span in simple mode.
show-size-change The page size selector.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-button,sl-select,sl-icon>