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.8-v2.18.0/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.8-v2.18.0/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 The prefix slot.
no-data when total=0 to show .
default tool bar end to show .

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,use can defaultPrevented ,then sl-page-change can not be emit . -

Learn more about events.

Parts

Name Description
base The component’s base wrapper.
pageWrap The component’s to page button wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

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