首页 / 组件 / 页码组件

页码组件

页码组件用于长列表数据的分页展示，帮助用户在大量数据中进行导航，提供便捷的数据浏览体验。

导航组件 数据展示

基础用法

基础的页码组件，包含页码按钮、上一页/下一页按钮等。

  • 1
  • 2
  • 3
  • ...
  • 8
示例代码 
<ul class="pagination">
    <li class="pagination-item pagination-prev">
        <i class="mdi mdi-chevron-left"></i>
    </li>
    <li class="pagination-item active">1</li>
    <li class="pagination-item">2</li>
    <li class="pagination-item">3</li>
    <li class="pagination-item pagination-ellipsis">...</li>
    <li class="pagination-item">8</li>
    <li class="pagination-item pagination-next">
        <i class="mdi mdi-chevron-right"></i>
    </li>
</ul>

不同尺寸

页码组件提供不同尺寸的选择，适应不同场景需求。

  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
示例代码 
<!-- 小尺寸 -->
<ul class="pagination pagination-small">
    <li class="pagination-item pagination-prev"><i class="mdi mdi-chevron-left"></i></li>
    <li class="pagination-item active">1</li>
    <li class="pagination-item">2</li>
    <li class="pagination-item">3</li>
    <li class="pagination-item pagination-next"><i class="mdi mdi-chevron-right"></i></li>
</ul>

<!-- 默认尺寸 -->
<ul class="pagination">
    <li class="pagination-item pagination-prev"><i class="mdi mdi-chevron-left"></i></li>
    <li class="pagination-item active">1</li>
    <li class="pagination-item">2</li>
    <li class="pagination-item">3</li>
    <li class="pagination-item pagination-next"><i class="mdi mdi-chevron-right"></i></li>
</ul>

<!-- 大尺寸 -->
<ul class="pagination pagination-large">
    <li class="pagination-item pagination-prev"><i class="mdi mdi-chevron-left"></i></li>
    <li class="pagination-item active">1</li>
    <li class="pagination-item">2</li>
    <li class="pagination-item">3</li>
    <li class="pagination-item pagination-next"><i class="mdi mdi-chevron-right"></i></li>
</ul>

简洁模式

当页码较多时，可以选择简洁模式，只显示部分页码。

  • 1
  • ...
  • 4
  • 5
  • 6
  • ...
  • 10
示例代码 
<ul class="pagination">
    <li class="pagination-item pagination-prev"><i class="mdi mdi-chevron-left"></i></li>
    <li class="pagination-item">1</li>
    <li class="pagination-item pagination-ellipsis">...</li>
    <li class="pagination-item">4</li>
    <li class="pagination-item active">5</li>
    <li class="pagination-item">6</li>
    <li class="pagination-item pagination-ellipsis">...</li>
    <li class="pagination-item">10</li>
    <li class="pagination-item pagination-next"><i class="mdi mdi-chevron-right"></i></li>
</ul>

带跳转

支持输入页码快速跳转到指定页。

禁用状态

页码组件的禁用状态，如第一页时的上一页按钮禁用。

  • 1
  • 2
  • 3
示例代码 
<ul class="pagination">
    <li class="pagination-item pagination-prev disabled">
        <i class="mdi mdi-chevron-left"></i>
    </li>
    <li class="pagination-item active">1</li>
    <li class="pagination-item">2</li>
    <li class="pagination-item">3</li>
    <li class="pagination-item pagination-next">
        <i class="mdi mdi-chevron-right"></i>
    </li>
</ul>

背景色变体

可以自定义不同的背景色样式，以适应不同的设计需求。

  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3
示例代码 
<!-- 主要色 -->
<ul class="pagination pagination-primary">
    <li class="pagination-item pagination-prev"><i class="mdi mdi-chevron-left"></i></li>
    <li class="pagination-item active">1</li>
    <li class="pagination-item">2</li>
    <li class="pagination-item">3</li>
    <li class="pagination-item pagination-next"><i class="mdi mdi-chevron-right"></i></li>
</ul>

<!-- 成功色 -->
<ul class="pagination pagination-success">
    <li class="pagination-item pagination-prev"><i class="mdi mdi-chevron-left"></i></li>
    <li class="pagination-item active">1</li>
    <li class="pagination-item">2</li>
    <li class="pagination-item">3</li>
    <li class="pagination-item pagination-next"><i class="mdi mdi-chevron-right"></i></li>
</ul>

<!-- 警告色 -->
<ul class="pagination pagination-warning">
    <li class="pagination-item pagination-prev"><i class="mdi mdi-chevron-left"></i></li>
    <li class="pagination-item active">1</li>
    <li class="pagination-item">2</li>
    <li class="pagination-item">3</li>
    <li class="pagination-item pagination-next"><i class="mdi mdi-chevron-right"></i></li>
</ul>

<!-- 危险色 -->
<ul class="pagination pagination-danger">
    <li class="pagination-item pagination-prev"><i class="mdi mdi-chevron-left"></i></li>
    <li class="pagination-item active">1</li>
    <li class="pagination-item">2</li>
    <li class="pagination-item">3</li>
    <li class="pagination-item pagination-next"><i class="mdi mdi-chevron-right"></i></li>
</ul>

API

页码组件的属性和类。

属性 说明 类型 默认值
pagination 基础类，所有分页组件都需要添加 string -
pagination-item 页码项的基础类 string -
active 当前页的高亮样式 string -
pagination-prev 上一页按钮 string -
pagination-next 下一页按钮 string -
pagination-ellipsis 省略号 string -
pagination-small 小尺寸页码 string -
pagination-large 大尺寸页码 string -
disabled 禁用状态 boolean false