参考
分页 Pagination
Pagination:分页导航。部件:Root、Item(页码按钮)、Ellipsis、PrevTrigger、NextTrigger、FirstTrigger、LastTrigger。各 Item 带有 data-selected。
Root · Item · Ellipsis · FirstTrigger · PrevTrigger · NextTrigger · LastTrigger
#Ellipsis
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
index | number | — |
#FirstTrigger
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Item
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
type | "page" | — | |
value | number | — |
#LastTrigger
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#NextTrigger
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#PrevTrigger
纯造型的部件——自身没有属性,沿用部件结构的共享样式。
#Root
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
size | String as PropType<"sm" | "md" | "lg"> | "md" | 各分页按钮共用的控件高度档位 |
count | number | 数据项总数 | |
defaultPage | number | 1 | 初始激活页码;适合不需要受控激活页码的场景 |
defaultPageSize | number | 10 | 每页数据项数量的初始值;适合不需要受控每页数量的场景 |
getPageUrl | (details: pagination.PageUrlDetails) => string | 生成分页链接 href 属性的函数;仅在 type 为 "link" 时使用 | |
id | string | 组件内部状态机的唯一标识 | |
ids | Partial<{ root: string; ellipsis(index: number): string; prevTrigger: string; nextTrigger: string; item(page: number): string; }> | 分页组件各元素的 id,便于组合使用 | |
page | number | 当前激活页码的受控值 | |
pageSize | number | 每页数据项数量的受控值 | |
siblingCount | number | 1 | 激活页码两侧显示的页数 |
translations | pagination.IntlTranslations | 无障碍元素及其状态使用的本地化文案 | |
type | 'button' | 'link' | "button" | 触发器元素的 type |
| 事件 | 载荷 |
|---|---|
pageChange | details: PageChangeDetails |
update:page | page: number |
pageSizeChange | details: PageSizeChangeDetails |
update:pageSize | pageSize: number |