分页
使用方法
将多个按钮放置在 <div class="pager">
内即可创建一个分页组件。
简洁样式
简单的翻页。
状态
为分页按钮添加 active
类标记选中,添加 disabled
类来禁用页码,被禁用的页码将无法响应点击事件。
外观
分页按钮间距
使用 gap-*
CSS 工具类 可获得宽松的分页组件。
两边对齐
结合使用 justify-between
CSS 工具类 可获得页面两端对齐的分页组件。
尺寸
除了默认大小,还提供了额外的 2 种预设尺寸。可以通过为 pager
添加 size-*
类来获取其他尺寸外观。
调整每页显示数
结合使用 dropdown
下拉菜单组件 可展示调整每页显示数的分页组件。
前往页码
结合使用 input-group
输入组组件 可展示快速跳转到某一页的分页组件。
CSS 类
分页提供了如下 CSS 类:
类 | 类型 | 作用 |
---|---|---|
pager | 实体类 | 元素作为分页组件 |
pager-goto | 实体类 | 元素作为分页的跳转组件 |
pager-size-menu | 实体类 | 元素作为分页的每页条数的下拉组件 |