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实体类元素作为分页的每页条数的下拉组件

MIT License (MIT)