Pagination Group

Navigates a finite collection of numbered pages.

PaginationGroup web component

Navigates a finite collection of numbered pages.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Page positions

Compare the first, middle, last, and second page positions.

<noora-pagination-group current-page="1" number-of-pages="12"></noora-pagination-group>
<noora-pagination-group current-page="6" number-of-pages="12"></noora-pagination-group>
<noora-pagination-group current-page="12" number-of-pages="12"></noora-pagination-group>
<noora-pagination-group current-page="2" number-of-pages="12"></noora-pagination-group>

Page counts

Show ellipsis behavior across small and large collections.

<noora-pagination-group current-page="3" number-of-pages="5"></noora-pagination-group>
<noora-pagination-group current-page="25" number-of-pages="50"></noora-pagination-group>
<noora-pagination-group current-page="500" number-of-pages="999"></noora-pagination-group>

Edge cases

Handle one-page, two-page, and near-boundary collections.

<noora-pagination-group current-page="1" number-of-pages="1"></noora-pagination-group>
<noora-pagination-group current-page="1" number-of-pages="2"></noora-pagination-group>
<noora-pagination-group current-page="2" number-of-pages="2"></noora-pagination-group>
<noora-pagination-group current-page="3" number-of-pages="20"></noora-pagination-group>
<noora-pagination-group current-page="18" number-of-pages="20"></noora-pagination-group>

Attributes

Attribute	Type or allowed values	Default	Description
`current-page`	number	`1`	Sets the selected page.
`number-of-pages`	number	`1`	Sets the total page count.
`href-template`	string	`None`	Sets link locations by replacing `{page}` with the page number.

Events

Event	Type	Description
`noora-page-change`	`CustomEvent<{ page: number }>`	Emitted when a page control is activated.

Styling parts

Name	Description
`pagination`	The pagination container.
`page`	Each page control.
`previous`	The previous-page control.
`next`	The next-page control.

Behavior

Page activation emits a `noora-page-change` event.