Pagination
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages. It's typically used in item listing or search results pages. They tell users how many pages of results have been found and allow users to navigate back and forth between them. Use pagination when the list becomes extensively long.
Basic Usage
<triton-pagination></triton-pagination>
<TritonPagination/>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-pagination></triton-pagination>
</body>
</html>
Behavior
Positioning
Use the position property to set the position of the pagination element.
<triton-pagination total="5" position="left"></triton-pagination>
Page Size
Use the page-size property to set the amount of data items to be included per pagintion page.
<triton-pagination total="10" page-size="3"></triton-pagination>
Settings
Total Items
Use the total property to set the total amount of data items. This will be used to calculate the amount of pages.
<triton-pagination total="15"></triton-pagination>
If the number of pages exceeds 7 then truncation will happen automatically.
<triton-pagination total="20" page-size="3"></triton-pagination>
Current Page
Use the current-page property to set which page is currently open.
<triton-pagination total="20" page-size="3" current-page="4"></triton-pagination>
Playground
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
current-page | Set the active page | number | 1 |
page-size | Set the amount of data items to display on each page | number | 10 |
position | Set the alignment of the pagination component | Position.CENTER Position.LEFT Position.RIGHT | Position.CENTER |
size | Set the size of the pagination buttons | body small | - |
total | Set the total amount of data items included. This number is used to calculate the pages in the pagination | number | - |
Events
| Name | Type | Description | Extra |
|---|---|---|---|
| atChange | CustomEvent<number> | Emitted when the current page has changed | - |
| atClick | CustomEvent<void> | The default click behavior of the button | - |