Pagination

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Default

The default form of pagination.

import Pagination from '@/components/pagination';

<Pagination pages={7} />

Truncation

When the number of pages exceeds the maximum display limit, an ellipsis is used to truncate the remaining pages.

Double truncation is used when the current page is separated by more than thirteen pages from both the first and last page.

import Pagination from '@/components/pagination';

<Pagination pages={24} />

Default selected index

The index of the page to be selected by default can be specified.

import Pagination from '@/components/pagination';

<Pagination pages={24} defaultSelectedIndex={7} />