iter(g42): pagination 支持每页条数切换

This commit is contained in:
HIsheR
2026-10-26 11:53:49 +08:00
parent 39d105ad30
commit 314366aa8d
9 changed files with 103 additions and 24 deletions
+6 -3
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T03:51:18.113Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T03:53:26.496Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -766,6 +766,8 @@ divider({ label: '更多信息' }) / divider({ vertical: true })
- pageSize(必填):number —— 每页条数
- total(必填):number —— 总条数
- onChange(回调):(page: number) => void —— 翻页回调
- pageSizes:number[] —— 每页条数候选(如 [10, 20, 50]);传了才渲染条数切换器
- onPageSizeChange(回调):(size: number) => void —— 切换每页条数回调,同时自动回到第 1 页
示例:
@@ -780,8 +782,9 @@ const page = signal(1); pagination({ page, pageSize: 3, total: 24, onChange: (p)
3. 首末页自动禁用 ‹ › 翻页按钮,当前页禁点并标记 aria-current
4. 与 dataTable 联动:把同一个 page 信号传给 dataTable 的 page 参数,两处翻页自动同步
5. 键盘可达:全部是原生 button,Tab 聚焦后 Enter / Space 触发
6. pageSizes 传候选数组即出现「N 条/页」切换器,切换后自动回第 1 页;onPageSizeChange 拿新条数重算数据
现场演示:apps/docs/demo.html#sec-table
现场演示:apps/docs/demo.html#sec-pagination
### modal — 弹窗 Modal
@@ -1195,7 +1198,7 @@ API 速览:
- tooltip(props, trigger):悬浮提示,包裹触发器,hover / focus 延迟 150ms 出场,移出 / 失焦 / Esc 收起;视口一侧空间不足时自动翻转
- popover(props, trigger):可交互气泡卡片,包裹触发器,默认点击开合 + 点外部 / Esc 收起,content 可放按钮等交互元素;视口一侧空间不足时自动翻转
- skeleton(props):骨架屏占位,variant = text | rect | circle,text 支持 rows 多行,扫光微动画
- pagination(props):独立分页器,page 信号双向绑定,页码过多折叠省略号,首末页禁用翻页,jumpable 时末尾可输入页码直接跳转,键盘可达
- pagination(props):独立分页器,page 信号双向绑定,页码过多折叠省略号,首末页禁用翻页,jumpable 时末尾可输入页码直接跳转,键盘可达;pageSizes 可切每页条数
- spinner(props):加载指示器,size 控制直径
- progress(props):进度条,value 信号驱动 0-100(满格切 success 色);不传 value 退化为不确定态无限往复
- tabs(props):标签页,active 信号双向绑定,滑动指示条 + 方向键环形导航,支持禁用页签