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>
Buttons
Use the page-size property to set the amount of buttons to display in the pagination bar.
Note: The amount also includes the
[<][>]buttons, so this property should no be set to less than3.
<triton-pagination total="5" page-size="3"></triton-pagination>
Settings
Total Pages
Use the total property to set the total amount of pages
<triton-pagination total="5"></triton-pagination>
Setting a larger total will make truncation happen automatically. The arrow buttons will then be enabled, to navigate between pages.
<triton-pagination total="10"></triton-pagination>
Current Page
Use the current-page property to set which page is currently open
<triton-pagination total="5" current-page="4"></triton-pagination>
Playground
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
current-page | Set the current active page | number | 1 |
page-size | the amount of blocks to display in the pagination | number | 9 |
position | Set the alignment of the pagination component, left, center or right | Position.CENTER Position.LEFT Position.RIGHT | Position.CENTER |
size | the amount of blocks to display in the pagination | body small | - |
total | Set the total amount of 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 | - |