Pagination
<wa-pagination>
Pagination streamlines navigation through large data sets by segmenting results into pages, reducing cognitive load and improving findability.
Use this default pagination to navigate a large data set with standard page controls and a fixed page size.
<wa-pagination id='page-btn-DIV' total='2120' page-size='20' value='1'></wa-pagination>
Examples
Jump to heading
Simple Pagination
Jump to heading
Use the simple variant for compact views where you only need basic next/previous navigation.
<wa-pagination id='page-btn-DIV2' total='2120' page-size='20' value='1' simple></wa-pagination>
Empty Pagination
Jump to heading
Use the simple variant for compact views where you only need basic next/previous navigation.
<wa-pagination id='page-btn-DIV2' total='0' page-size='20' value='1' simple></wa-pagination>
Full Pagination
Jump to heading
Use the full variant when users must jump to first/last pages and adjust page size in enterprise workflows.
<wa-pagination id='page-btn-DIV3' total='2120' page-size='20' value='1' show-first show-last show-size-change show-page-change></wa-pagination>
Importing
Jump to heading
Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.
To manually import this component from NPM, use the following code.
import '@awesome.me/webawesome/dist/components/pagination/pagination.js';
To manually import this component from React, use the following code.
import WaPagination from '@awesome.me/webawesome/dist/react/pagination';
Slots
Jump to heading
Learn more about using slots.
| Name | Description |
|---|---|
empty
|
when total=0 to show . |
end
|
tool bar end to show . |
start
|
The prefix slot. |
Attributes & Properties
Jump to heading
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
alignalign |
Layout alignment
Type
'left' | 'right' | 'center'Default
'right' |
|
|
css |
One or more CSSResultGroup to include in the component's shadow root. Host styles are automatically prepended.
Type
CSSResultGroup | undefinedDefault
[styles] |
||
pageSizepage-size |
Page Break Size
Type
numberDefault
20 |
|
|
pageSizeOptions |
Support for resized pagination
Type
Array |
||
showFirstshow-first |
Whether to display Jump directly to the first page
Type
booleanDefault
false |
|
|
showLastshow-last |
Show or not Show Jump directly to the last page
Type
booleanDefault
false |
|
|
showPageChangeshow-page-change |
Whether to allow direct adjustment of the first few pages
Type
booleanDefault
false |
|
|
showSizeChangeshow-size-change |
Whether to resize the paging component
Type
booleanDefault
false |
|
|
simplesimple |
Allowed or not Simplified paging mode
Type
booleanDefault
false |
|
|
totaltotal |
Total number of sizes
Type
number |
|
|
valuevalue |
Current page
Type
numberDefault
1 |
|
Events
Jump to heading
Learn more about events.
| Name | Description |
|---|---|
before-change |
Emitted before page changed,use can defaultPrevented ,then sl-page-change can not be emit . |
change |
Emitted when current page changed . |
CSS parts
Jump to heading
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
base |
The component's base wrapper. |
::part(base)
|
pageWrap |
The component's to page button wrapper. |
::part(pageWrap)
|
Dependencies
Jump to heading
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.