iter(g170): 分页器支持极简模式与单页隐藏
This commit is contained in:
+15
-2
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"$schema": "ui-arch-registry-index/0.1",
|
"$schema": "ui-arch-registry-index/0.1",
|
||||||
"generatedAt": "2026-10-26T08:15:48.744Z",
|
"generatedAt": "2026-10-26T08:16:48.747Z",
|
||||||
"repoRoot": ".",
|
"repoRoot": ".",
|
||||||
"packages": [
|
"packages": [
|
||||||
{
|
{
|
||||||
@@ -1660,6 +1660,18 @@
|
|||||||
"r": 1,
|
"r": 1,
|
||||||
"d": "总条数"
|
"d": "总条数"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"n": "simple",
|
||||||
|
"t": "boolean",
|
||||||
|
"df": "false",
|
||||||
|
"d": "极简模式:只留上一页 / 下一页与「当前 / 总页」文字,适合表格工具栏等窄位"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"n": "hideOnSinglePage",
|
||||||
|
"t": "boolean",
|
||||||
|
"df": "false",
|
||||||
|
"d": "只有一页时整个分页器隐藏(不占布局位)"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"n": "onChange",
|
"n": "onChange",
|
||||||
"t": "(page: number) => void",
|
"t": "(page: number) => void",
|
||||||
@@ -1691,7 +1703,8 @@
|
|||||||
"首末页自动禁用 ‹ › 翻页按钮,当前页禁点并标记 aria-current",
|
"首末页自动禁用 ‹ › 翻页按钮,当前页禁点并标记 aria-current",
|
||||||
"与 dataTable 联动:把同一个 page 信号传给 dataTable 的 page 参数,两处翻页自动同步",
|
"与 dataTable 联动:把同一个 page 信号传给 dataTable 的 page 参数,两处翻页自动同步",
|
||||||
"键盘可达:全部是原生 button,Tab 聚焦后 Enter / Space 触发",
|
"键盘可达:全部是原生 button,Tab 聚焦后 Enter / Space 触发",
|
||||||
"pageSizes 传候选数组即出现「N 条/页」切换器,切换后自动回第 1 页;onPageSizeChange 拿新条数重算数据"
|
"pageSizes 传候选数组即出现「N 条/页」切换器,切换后自动回第 1 页;onPageSizeChange 拿新条数重算数据",
|
||||||
|
"空间紧的地方传 simple:页码区换成「3 / 5」文字 + 两个箭头(文字带 aria-live,翻页会被读屏播报);数据少到只有一页时再传 hideOnSinglePage,整块自动消失而不是留个灰掉的 1"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -244,6 +244,7 @@ const treePick = signal('core'); // 树形选中节点 key
|
|||||||
const transferKeys = signal<string[]>(['a11y']); // 穿梭框右侧集合(外部受控演示)
|
const transferKeys = signal<string[]>(['a11y']); // 穿梭框右侧集合(外部受控演示)
|
||||||
const cityPick = signal(''); // 可搜索下拉的选中城市
|
const cityPick = signal(''); // 可搜索下拉的选中城市
|
||||||
const pagerPage = signal(1); // 独立分页器当前页
|
const pagerPage = signal(1); // 独立分页器当前页
|
||||||
|
const simplePage = signal(2); // 极简分页演示用页码
|
||||||
const pickedFiles = signal(''); // 文件选择结果(名称串)
|
const pickedFiles = signal(''); // 文件选择结果(名称串)
|
||||||
|
|
||||||
// —— 禁用态演示:开关信号同时绑定 switch 的 checked 与 checkbox 的 disabled ——
|
// —— 禁用态演示:开关信号同时绑定 switch 的 checked 与 checkbox 的 disabled ——
|
||||||
@@ -1178,6 +1179,14 @@ const content = h(
|
|||||||
pagination({ page: pagerPage, pageSize: 10, total: 137, jumpable: true, pageSizes: [10, 20, 50], onChange: (p) => pagerPage(p) }),
|
pagination({ page: pagerPage, pageSize: 10, total: 137, jumpable: true, pageSizes: [10, 20, 50], onChange: (p) => pagerPage(p) }),
|
||||||
h('span', { class: 'out' }, () => `第 ${pagerPage()} 页`),
|
h('span', { class: 'out' }, () => `第 ${pagerPage()} 页`),
|
||||||
),
|
),
|
||||||
|
h(
|
||||||
|
'div',
|
||||||
|
{ class: 'row' },
|
||||||
|
pagination({ page: simplePage, pageSize: 2, total: 9, simple: true }), // 极简:只留前后翻页与 3 / 5
|
||||||
|
h('span', { class: 'out' }, '极简模式:工具栏窄位只留箭头与进度'),
|
||||||
|
pagination({ page: simplePage, pageSize: 20, total: 9, hideOnSinglePage: true }), // 单页:整块不渲染
|
||||||
|
h('span', { class: 'out' }, '单页隐藏:上面那块 9 条 / 每页 20 已自动消失'),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
section(
|
section(
|
||||||
'sec-menu',
|
'sec-menu',
|
||||||
|
|||||||
+4
-1
@@ -1,6 +1,6 @@
|
|||||||
# @ui-arch 组件库 Agent 文档(无图形版)
|
# @ui-arch 组件库 Agent 文档(无图形版)
|
||||||
|
|
||||||
> 自动生成于 2026-10-26T08:15:48.744Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
> 自动生成于 2026-10-26T08:16:48.747Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
|
||||||
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
|
||||||
|
|
||||||
## 快速上手
|
## 快速上手
|
||||||
@@ -850,6 +850,8 @@ space({ size: 'lg' }, button({ label: '保存' }), button({ label: '取消', var
|
|||||||
- page(必填):Signal<number> —— 当前页码信号,双向绑定:外部赋值自动翻页,点击页码写回信号
|
- page(必填):Signal<number> —— 当前页码信号,双向绑定:外部赋值自动翻页,点击页码写回信号
|
||||||
- pageSize(必填):number —— 每页条数
|
- pageSize(必填):number —— 每页条数
|
||||||
- total(必填):number —— 总条数
|
- total(必填):number —— 总条数
|
||||||
|
- simple(默认 false):boolean —— 极简模式:只留上一页 / 下一页与「当前 / 总页」文字,适合表格工具栏等窄位
|
||||||
|
- hideOnSinglePage(默认 false):boolean —— 只有一页时整个分页器隐藏(不占布局位)
|
||||||
- onChange(回调):(page: number) => void —— 翻页回调
|
- onChange(回调):(page: number) => void —— 翻页回调
|
||||||
- jumpable(默认 false):boolean —— 末尾显示跳页输入框(总页数 > 1 才出现);缺省 false
|
- jumpable(默认 false):boolean —— 末尾显示跳页输入框(总页数 > 1 才出现);缺省 false
|
||||||
- pageSizes:number[] —— 每页条数候选(如 [10, 20, 50]);传了才渲染条数切换器
|
- pageSizes:number[] —— 每页条数候选(如 [10, 20, 50]);传了才渲染条数切换器
|
||||||
@@ -869,6 +871,7 @@ const page = signal(1); pagination({ page, pageSize: 3, total: 24, onChange: (p)
|
|||||||
4. 与 dataTable 联动:把同一个 page 信号传给 dataTable 的 page 参数,两处翻页自动同步
|
4. 与 dataTable 联动:把同一个 page 信号传给 dataTable 的 page 参数,两处翻页自动同步
|
||||||
5. 键盘可达:全部是原生 button,Tab 聚焦后 Enter / Space 触发
|
5. 键盘可达:全部是原生 button,Tab 聚焦后 Enter / Space 触发
|
||||||
6. pageSizes 传候选数组即出现「N 条/页」切换器,切换后自动回第 1 页;onPageSizeChange 拿新条数重算数据
|
6. pageSizes 传候选数组即出现「N 条/页」切换器,切换后自动回第 1 页;onPageSizeChange 拿新条数重算数据
|
||||||
|
7. 空间紧的地方传 simple:页码区换成「3 / 5」文字 + 两个箭头(文字带 aria-live,翻页会被读屏播报);数据少到只有一页时再传 hideOnSinglePage,整块自动消失而不是留个灰掉的 1
|
||||||
|
|
||||||
现场演示:apps/docs/demo.html#sec-pagination
|
现场演示:apps/docs/demo.html#sec-pagination
|
||||||
|
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ function pageSequence(page: number, totalPages: number): (number | null)[] {
|
|||||||
return seq;
|
return seq;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*** 独立分页器:受控组件,page 为双向绑定信号;页码过多折叠省略号,首末页禁用翻页,jumpable 可跳页,pageSizes 可切每页条数 ***/
|
/*** 独立分页器:受控组件,page 为双向绑定信号;页码过多折叠省略号,首末页禁用翻页,jumpable 可跳页,pageSizes 可切每页条数,simple 走极简、hideOnSinglePage 单页隐藏 ***/
|
||||||
|
|
||||||
export function pagination(props: PaginationProps): HTMLElement {
|
export function pagination(props: PaginationProps): HTMLElement {
|
||||||
// —— 状态集中声明 ——
|
// —— 状态集中声明 ——
|
||||||
@@ -61,6 +61,14 @@ export function pagination(props: PaginationProps): HTMLElement {
|
|||||||
renderList(pages, () => {
|
renderList(pages, () => {
|
||||||
const totalNow = totalPages();
|
const totalNow = totalPages();
|
||||||
const page = Math.min(totalNow, Math.max(1, props.page()));
|
const page = Math.min(totalNow, Math.max(1, props.page()));
|
||||||
|
nav.hidden = Boolean(props.hideOnSinglePage) && totalNow <= 1; // 单页时整块隐藏,工具栏不必为它留位
|
||||||
|
if (props.simple) { // 极简态:页码不给点,只留前后翻页与进度文字
|
||||||
|
return [
|
||||||
|
h('button', { class: 'ua-page-btn', disabled: page <= 1, 'aria-label': '上一页', onClick: () => go(page - 1) }, '‹'),
|
||||||
|
h('span', { class: 'ua-page-simple', 'aria-live': 'polite' }, `${page} / ${totalNow}`),
|
||||||
|
h('button', { class: 'ua-page-btn', disabled: page >= totalNow, 'aria-label': '下一页', onClick: () => go(page + 1) }, '›'),
|
||||||
|
];
|
||||||
|
}
|
||||||
const items: HTMLElement[] = [h('button', { class: 'ua-page-btn', disabled: page <= 1, 'aria-label': '上一页', onClick: () => go(page - 1) }, '‹')];
|
const items: HTMLElement[] = [h('button', { class: 'ua-page-btn', disabled: page <= 1, 'aria-label': '上一页', onClick: () => go(page - 1) }, '‹')];
|
||||||
for (const it of pageSequence(page, totalNow)) {
|
for (const it of pageSequence(page, totalNow)) {
|
||||||
items.push(
|
items.push(
|
||||||
|
|||||||
@@ -314,6 +314,8 @@ export interface PaginationProps {
|
|||||||
total: number; // 总条数
|
total: number; // 总条数
|
||||||
jumpable?: boolean; // 开启后在末尾显示跳页输入框(总页数 > 1 才出现)
|
jumpable?: boolean; // 开启后在末尾显示跳页输入框(总页数 > 1 才出现)
|
||||||
pageSizes?: number[]; // 每页条数候选(如 [10, 20, 50]);传了才渲染条数切换器
|
pageSizes?: number[]; // 每页条数候选(如 [10, 20, 50]);传了才渲染条数切换器
|
||||||
|
simple?: boolean; // 极简模式:只留上一页 / 下一页与「当前 / 总页」文字,适合工具栏窄位;缺省 false
|
||||||
|
hideOnSinglePage?: boolean; // 只有一页时整个分页器隐藏;缺省 false
|
||||||
onPageSizeChange?: (size: number) => void; // 切换每页条数回调(同时自动回到第 1 页)
|
onPageSizeChange?: (size: number) => void; // 切换每页条数回调(同时自动回到第 1 页)
|
||||||
onChange?: (page: number) => void; // 翻页回调
|
onChange?: (page: number) => void; // 翻页回调
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1531,6 +1531,18 @@
|
|||||||
"r": 1,
|
"r": 1,
|
||||||
"d": "总条数"
|
"d": "总条数"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"n": "simple",
|
||||||
|
"t": "boolean",
|
||||||
|
"df": "false",
|
||||||
|
"d": "极简模式:只留上一页 / 下一页与「当前 / 总页」文字,适合表格工具栏等窄位"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"n": "hideOnSinglePage",
|
||||||
|
"t": "boolean",
|
||||||
|
"df": "false",
|
||||||
|
"d": "只有一页时整个分页器隐藏(不占布局位)"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"n": "onChange",
|
"n": "onChange",
|
||||||
"t": "(page: number) => void",
|
"t": "(page: number) => void",
|
||||||
@@ -1562,7 +1574,8 @@
|
|||||||
"首末页自动禁用 ‹ › 翻页按钮,当前页禁点并标记 aria-current",
|
"首末页自动禁用 ‹ › 翻页按钮,当前页禁点并标记 aria-current",
|
||||||
"与 dataTable 联动:把同一个 page 信号传给 dataTable 的 page 参数,两处翻页自动同步",
|
"与 dataTable 联动:把同一个 page 信号传给 dataTable 的 page 参数,两处翻页自动同步",
|
||||||
"键盘可达:全部是原生 button,Tab 聚焦后 Enter / Space 触发",
|
"键盘可达:全部是原生 button,Tab 聚焦后 Enter / Space 触发",
|
||||||
"pageSizes 传候选数组即出现「N 条/页」切换器,切换后自动回第 1 页;onPageSizeChange 拿新条数重算数据"
|
"pageSizes 传候选数组即出现「N 条/页」切换器,切换后自动回第 1 页;onPageSizeChange 拿新条数重算数据",
|
||||||
|
"空间紧的地方传 simple:页码区换成「3 / 5」文字 + 两个箭头(文字带 aria-live,翻页会被读屏播报);数据少到只有一页时再传 hideOnSinglePage,整块自动消失而不是留个灰掉的 1"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1289,6 +1289,13 @@ button.ua-step-dot:hover {
|
|||||||
color: var(--ua-color-text-muted);
|
color: var(--ua-color-text-muted);
|
||||||
font-size: var(--ua-font-size-sm);
|
font-size: var(--ua-font-size-sm);
|
||||||
}
|
}
|
||||||
|
.ua-page-simple {
|
||||||
|
padding: 0 var(--ua-space-2);
|
||||||
|
color: var(--ua-color-text-muted);
|
||||||
|
font-size: var(--ua-font-size-sm);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
.ua-page-jump {
|
.ua-page-jump {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
padding: 4px 6px;
|
padding: 4px 6px;
|
||||||
|
|||||||
Reference in New Issue
Block a user