Pagination
Pagination component with page numbers, supporting custom sibling count, responsive collapsing, different sizes, and global theme configuration.
Built on top of Radix Vue Pagination and BrConfigProvider.
Basic Usage
The most basic pagination, binding the current page number via v-model:page.
Custom Sibling Count
Control the number of page numbers shown on each side of the current page via the sibling-count prop.
Different Sizes
Supports xs, sm, md, lg, xl, 2xl size variants.
Responsive Pagination
Combine with useWindowSize from @vueuse/core to dynamically control sibling-count for automatic collapsing on smaller screens.
Theming
The colors (primary, active color), border radius, and sizes of the BrPagination component are fully implemented based on CSS variables provided by BrConfigProvider.
You can also locally override via TailwindCSS:
<BrPaginationLink class="rounded-full border-blue-500 text-blue-500" />API
BrPagination
| Prop | Type | Default | Description |
|---|---|---|---|
total | number | - | Total number of items |
page (v-model) | number | 1 | Current page number |
itemsPerPage | number | 10 | Number of items per page |
siblingCount | number | 1 | Number of page numbers shown on each side of the current page |
showEdges | boolean | false | Whether to always show the first and last page numbers |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | Pagination button size, overrides global configuration |
BrPaginationLink
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | The value of the corresponding page number |
isActive | boolean | false | Whether it is active |
disabled | boolean | false | Whether it is disabled |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | - | Size variant |
Other Sub-components
BrPaginationPrevious, BrPaginationNext, BrPaginationFirst, BrPaginationLast, etc. all support passing class to override styles via TailwindCSS.