Pagination 分页

通用布局能力：RenderPagination 实例统一支持 width、height、min/max、margin 和槽位对齐；分页段内部 padding 和 gap 属于组件视觉规格。详见组件通用布局属性。

RenderPagination 是轻量分页控件，用于在数据列表、表格或查询结果下方切换页码。它只负责页码展示、上一页/下一页、数字页、摘要、焦点和键盘交互，不负责查询数据、分页请求或总数计算。

API 总览

import {  RenderPagination,} from 'ds-ui'

最小装配顺序是：业务计算 currentPage 和 totalPages，创建 RenderPagination({ currentPage, totalPages, onChange })，在 onChange(page) 中更新业务状态并重新查询或切换数据。

何时使用

使用 Pagination：

• 查询结果、列表或表格需要按页显示。
• 分页状态由业务或服务端维护。
• 只需要上一页、下一页、页码和当前页摘要。
• 希望支持鼠标和键盘切页。

不要使用：

• 无限滚动或虚拟列表。使用对应数据组件的滚动能力。
• 页码来自复杂服务端游标。应在业务层把游标映射为页码或使用自定义控件。
• 需要页容量选择器、跳转输入框或总记录数展示。当前组件没有内建这些能力。

最小示例

import { RenderPagination } from 'ds-ui' const pager = new RenderPagination({  currentPage: 1,  totalPages: 12,  onChange: page => {    state.currentPage = page  },})

onChange 只在用户交互或键盘触发页码变化时调用。直接设置 currentPage 不触发 onChange。

构造参数

const compactPager = new RenderPagination({  currentPage: 5,  totalPages: 20,  maxVisiblePages: 3,  showSummary: false,  disabled: false,  onChange: page => {    state.currentPage = page  },})

属性和方法

交互行为

页码变化会先更新组件内部 currentPage，再触发 onChange(nextPage)。

当 disabled = true 时，上一页、下一页和数字页都按禁用态绘制，不响应鼠标和键盘，也不会触发 onChange。

布局和尺寸

• 宽度根据可见 segments 的文本宽度、padding 和 gap 计算。
• 高度来自主题分页样式。
• 当 totalPages 较大时，组件保留首页、尾页和当前页附近的连续页码，中间用省略号表示。
• 摘要文本会增加整体宽度；空间紧张时可传 showSummary: false。
• 组件不会自动换行或压缩页码。

生命周期

• 构造时在可见且未禁用状态下注册到 FocusManager。
• 设置 visible = false 或 disabled = true 时会退出焦点顺序。
• dispose() 时注销焦点并释放 onChange 引用。
• Pagination 没有子 render object，数据请求和分页缓存都由业务管理。

相关组件

• Table 表格
• GridView 数据表格
• ListView 列表