Skip to main content
2.0.0Next2.0.92.0.82.0.72.0.62.0.52.0.42.0.32.0.22.0.12.0.01.0.0
Version: 2.0.0

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 than 3.

<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

PropertyDescriptionTypeDefault
current-pageSet the current active pagenumber1
page-sizethe amount of blocks to display in the paginationnumber9
positionSet the alignment of the pagination component, left, center or rightPosition.CENTER Position.LEFT Position.RIGHTPosition.CENTER
sizethe amount of blocks to display in the paginationbody small-
totalSet the total amount of pages in the paginationnumber-

Events

NameTypeDescriptionExtra
atChangeCustomEvent<number>Emitted when the current page has changed-
atClickCustomEvent<void>The default click behavior of the button-

Details

Depends on