Pagination

<ts-pagination> vv0.4.0

The ts-pagination component.

Open in Storybook for interactive demos.

Preview

<ts-pagination current-page="1" page-size="10" sibling-count="1"></ts-pagination>

Properties

Property	Attribute	Type	Default	Description
currentPage	current-page	number	1	The current active page (1-based).
pageSize	page-size	number	10	Number of items per page.
siblingCount	sibling-count	number	1	Number of sibling pages shown around the current page.
size	size	"lg" | "md" | "sm" | "xl" | "xs"	'md'	The size of the pagination buttons.
total	total	number	—	Total number of items.

Events

Event	Detail	Bubbles	Composed	Description
tsChange	{ page: number; }	Yes	Yes	Emitted when the page changes.

CSS Parts

Use ::part() to style internal elements:

Part	Description
button	Each page button.
nav	The nav element.
next	The next button.
prev	The previous button.

ts-pagination::part(button) {
  /* your custom styles */
}

Usage

HTML

<ts-pagination current-page="1" page-size="10" sibling-count="1"></ts-pagination>

React

import { TsPagination } from '@tessera-ui/react';

<TsPagination currentPage="1" pageSize="10"></TsPagination>