Pagination

代码演示

如何引入

import { Pagination } from '@chenzy-design/svelte';

基本

基础分页，通过 total 设置总条数，pageSize 设置每页容量。

禁用

通过 disabled 设置禁用。

总页数显示

通过 showTotal 属性控制是否展示总页数。

指定当前页码

可以通过 defaultCurrentPage 指定当前激活的页码。

每页容量切换

通过设置 showSizeChanger 为 true，允许通过 Select 组件快速切换每页容量。

快速跳转至某页

通过设置 showQuickJumper 为 true，允许通过 Input 控件输入页码，快速跳转。当 Input 失去焦点时，若其中为有效数字，会直接跳转；也可在 Input 聚焦时输入期望页码后敲击回车跳转。若输入页码大于总页数，会自动跳转至最后一页。

页码受控

传入 currentPage 后为受控组件，当前页完全取决于 currentPage。

预设每页容量可选值

通过 pageSizeOpts 指定每页显示多少条的可选值。

迷你版本

size 设置为 small 显示紧凑视图。

开启 hoverShowPageSelect，可以 hover 页码快速切换（仅 size='small' 时生效）。

API 参考

属性	说明	类型	默认值
class	类名	string	-
currentPage	当前页码	number	-
defaultCurrentPage	默认的当前页码	number	-
disabled	禁用	boolean	false
hideOnSinglePage	总页数小于 2 时是否自动隐藏分页器（showSizeChanger 为 true 时此开关不再生效）	boolean	false
hoverShowPageSelect	hover 页码时是否展示切换页数的 Select 控件，仅当 size='small' 时生效	boolean	false
nextText	下一页文本	string | Snippet	-
pageSize	每页条数	number	10
pageSizeOpts	指定每页显示多少条	number[]	[10, 20, 40, 100]
popoverPosition	浮层方向，具体可见 Popover position	string	“bottomLeft”
popoverZIndex	浮层 z-index 值	number	1030
prevText	上一页文本	string | Snippet	-
preventPageChangeOnPageSizeChange	切换 pageSize 时是否阻止自动调整 currentPage	boolean	false
style	样式	string	-
size	尺寸	string	-
showTotal	是否显示总页数	boolean	false
showSizeChanger	是否显示切换页容量的 Select，size 为 small 时不生效	boolean	false
showQuickJumper	是否显示切换页码的 Input	boolean	false
total	总条数	number	1
onChange	页码、每页容量变化时的回调函数	(currentPage: number, pageSize: number) => void	-
onPageChange	页码变化的回调函数	(currentPage: number) => void	-
onPageSizeChange	每页容量变化时的回调函数	(pageSize: number) => void	-

无障碍

ARIA

• aria-label：描述组件内页码、前一页、后一页等元素的标签。
• aria-current：指向当前页的页码元素。

FAQ

• 为什么 hoverShowPageSelect / 省略号弹层最多只展示 1,000,000 条页码？ 因为创建列表时，浏览器对 Array.from() 创建数组的大小存在限制；同时为了兼顾开销，设定了 1,000,000 这个阈值。

设计变量

color

font

height

radius

spacing

width

变量	默认值	用法
--cd-color-pagination-item-bg-active	var(--cd-color-fill-1)	翻页器 页码 按下态背景颜色
--cd-color-pagination-item-bg-default	transparent	翻页器 页码 背景颜色
--cd-color-pagination-item-bg-disabled	transparent	翻页器 页码 禁用态背景颜色
--cd-color-pagination-item-bg-hover	var(--cd-color-fill-0)	翻页器 页码 悬浮态背景颜色
--cd-color-pagination-item-bg-selected	var(--cd-color-primary-light-default)	翻页器 页码 选中态背景颜色
--cd-color-pagination-item-bg-selected-disabled	var(--cd-color-disabled-fill)	翻页器 页码 选中禁用态背景颜色
--cd-color-pagination-item-border-active	transparent	翻页器 页码 激活边框颜色
--cd-color-pagination-item-border-default	transparent	翻页器 页码 默认边框颜色
--cd-color-pagination-item-border-disabled	transparent	翻页器 页码 禁用边框颜色
--cd-color-pagination-item-border-hover	transparent	翻页器 页码 悬浮边框颜色

显示第 1 条-第 10 条，共 20 条

• 1
• 2