Skip to content

分页

使用方法

将多个按钮放置在 <div class="pager"> 内即可创建一个分页组件。

简洁样式

简单的翻页。

状态

为分页按钮添加 active 类标记选中,添加 disabled 类来禁用页码,被禁用的页码将无法响应点击事件。

外观

分页按钮间距

使用 gap-* CSS 工具类 可获得宽松的分页组件。

两边对齐

结合使用 justify-between CSS 工具类 可获得页面两端对齐的分页组件。

尺寸

除了默认大小,还提供了额外的 2 种预设尺寸。可以通过为 pager 添加 size-* 类来获取其他尺寸外观。

调整每页显示数

结合使用 dropdown 下拉菜单组件 可展示调整每页显示数的分页组件。

前往页码

结合使用 input-group 输入组组件 可展示快速跳转到某一页的分页组件。

CSS 类

分页提供了如下 CSS 类:

类型作用
pager实体类元素作为分页组件
pager-goto实体类元素作为分页的跳转组件
pager-size-menu实体类元素作为分页的每页条数的下拉组件