Pagination 分页
带页码的分页组件，支持自定义页码数量、响应式折叠、不同尺寸和全局主题配置。
基于 Radix Vue Pagination 和 BrConfigProvider 实现。
基础用法
最基础的分页，通过 v-model:page 绑定当前页码。
Current page: 1
Example
自定义页码数量
通过 sibling-count 属性可以控制当前页码左右两侧显示的页码数量。
Sibling count: 3
Example
不同尺寸
支持 xs, sm, md, lg, xl, 2xl 尺寸变体。
Extra Small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra Large (xl)
2 Extra Large (2xl)
Example
响应式折叠分页
结合 @vueuse/core 的 useWindowSize 动态控制 sibling-count 实现小屏自动折叠页码。
Try resizing the window width (< 640px)
Example
主题定制
BrPagination 组件的颜色（主色调、激活色）、圆角和尺寸完全基于 BrConfigProvider 提供的 CSS 变量实现。
Example
你也可以通过 TailwindCSS 局部覆盖：
vue
<BrPaginationLink class="rounded-full border-blue-500 text-blue-500" />API
BrPagination
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
total | number | - | 数据总数 |
page (v-model) | number | 1 | 当前页码 |
itemsPerPage | number | 10 | 每页显示条数 |
siblingCount | number | 1 | 当前页左右两侧显示的页码数量 |
showEdges | boolean | false | 是否始终显示首尾页码 |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' | 分页按钮尺寸，会覆盖全局配置 |
BrPaginationLink
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number | - | 对应页码的值 |
isActive | boolean | false | 是否为激活状态 |
disabled | boolean | false | 是否禁用 |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | - | 尺寸大小 |
其他子组件
BrPaginationPrevious、BrPaginationNext、BrPaginationFirst、BrPaginationLast 等均支持传递 class 以通过 TailwindCSS 进行样式覆盖。