Skip to page content

分页

QPagination 组件可用于任何需要分页系统的地方。它为用户提供了一个简单的 UI,用于在项目或页面之间移动。

QPagition 有两种操作模式:按钮或使用输入框。后者允许用户通过点击/轻击输入框,键入页码,然后按 Enter 键进入特定页面。如果新页码在有效范围内,则 QPagination 绑定的 model 值将相应更改。

QPagination API

用法

设计

标准



以下只是一些示例,并不是完整的列表:

自定义图标

使用输入框

最大显示页数

处理边界

自定义省略号
v2.30+

ellipsis 插槽用于替换那些 “…” 按钮。把它的 btnProps 展开到你自己的 QBtn 上即可保持默认外观,然后附加你需要的任何行为:下面的示例用一个 QPopupEdit 让用户直接输入页码,而不是跳到下一个被隐藏的页。如果你也想要默认的导航行为,请绑定该插槽的 onClick(使用 to-fn 时则绑定 to)。

本地化数字
v2.31+

当所使用的语言包定义了 formatNumber 函数时,页码会遵循该函数进行显示(参见 QDate 的本地化数字)。fa 和 fa-IR 语言包会渲染波斯数字。model 数据以及 input 模式始终保持为数字。

无障碍访问
v2.25+

QPagination 渲染为一个 navigation 地标。首页/上一页/下一页/末页按钮从当前使用的 Quasar 语言包 获取本地化的 aria-label,编号按钮标注它们所指向的页码,当前页的按钮带有 aria-current="page" 标记。地标本身从同一语言包命名(pagination.label);当一个页面有多个分页时,请传入你自己的 aria-label(它穿透到根元素)来区分它们。它还始终带有 aria-disabled,根据 disable 属性报告 true 或 false。

在输入模式下,键入的页码在用户按 Enter 或字段失焦时提交。