iter(g170): 分页器支持极简模式与单页隐藏
This commit is contained in:
@@ -16,7 +16,7 @@ function pageSequence(page: number, totalPages: number): (number | null)[] {
|
||||
return seq;
|
||||
}
|
||||
|
||||
/*** 独立分页器:受控组件,page 为双向绑定信号;页码过多折叠省略号,首末页禁用翻页,jumpable 可跳页,pageSizes 可切每页条数 ***/
|
||||
/*** 独立分页器:受控组件,page 为双向绑定信号;页码过多折叠省略号,首末页禁用翻页,jumpable 可跳页,pageSizes 可切每页条数,simple 走极简、hideOnSinglePage 单页隐藏 ***/
|
||||
|
||||
export function pagination(props: PaginationProps): HTMLElement {
|
||||
// —— 状态集中声明 ——
|
||||
@@ -61,6 +61,14 @@ export function pagination(props: PaginationProps): HTMLElement {
|
||||
renderList(pages, () => {
|
||||
const totalNow = totalPages();
|
||||
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) }, '‹')];
|
||||
for (const it of pageSequence(page, totalNow)) {
|
||||
items.push(
|
||||
|
||||
@@ -314,6 +314,8 @@ export interface PaginationProps {
|
||||
total: number; // 总条数
|
||||
jumpable?: boolean; // 开启后在末尾显示跳页输入框(总页数 > 1 才出现)
|
||||
pageSizes?: number[]; // 每页条数候选(如 [10, 20, 50]);传了才渲染条数切换器
|
||||
simple?: boolean; // 极简模式:只留上一页 / 下一页与「当前 / 总页」文字,适合工具栏窄位;缺省 false
|
||||
hideOnSinglePage?: boolean; // 只有一页时整个分页器隐藏;缺省 false
|
||||
onPageSizeChange?: (size: number) => void; // 切换每页条数回调(同时自动回到第 1 页)
|
||||
onChange?: (page: number) => void; // 翻页回调
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user