• 我们提供简单的分页组件，适应不同的UI设计方案。
  • 分页组件有固定的 html 结构，详情请参考代码示例。
实例
            
<nav class="pagination-box">
  <ul class="pagination">
    <li title="第一页">
      <a href="###">
        <span>
          &laquo;
        </span>
      </a>
    </li>
    <li title="上一页">
      <a href="###">
        <span>
          &lsaquo;
        </span>
      </a>
    </li>
    ...
    <li>
      <a href="###">
        ...
      </a>
    </li>
    ...
    <li title="下一页">
      <a href="###">
        <span>
          &rsaquo;
        </span>
      </a>
    </li>
    <li title="最后一页">
      <a href="###">
        <span>
          &raquo;
        </span>
      </a>
    </li>
  </ul>
</nav>
激活状态 禁用状态

激活状态

  • 给 .pagination 下的子元素 li 引用 .active 类。得到当前页的激活样式。
  • 你还可以将激活状态应用于 span 标签，或者在向前/向后的箭头处省略 a 标记，即替换 a 标签，这样就可以让其保持需要的样式而不能被点击。
实例
            
<nav class="pagination-box">
  <ul class="pagination">
    <li class="active">
      <a href="">
      </a>
    </li>
    ...
  </ul>
</nav>

<nav class="pagination-box">
  <ul class="pagination">
    <li class="active">
      <span>
      </span>
    </li>
    ...
  </ul>
</nav>

禁用状态

  • 给 .pagination 下的子元素 li 引用 .disabled 类。得到按钮的禁用样式。
  • 你还可以将禁用状态应用于 span 标签，或者在向前/向后的箭头处省略 a 标记，即替换 a 标签，这样就可以让其保持需要的样式而不能被点击。
实例
            
<nav class="pagination-box">
  <ul class="pagination">
    <li class="disabled">
      <a href="">
      </a>
    </li>
    ...
  </ul>
</nav>

<nav class="pagination-box">
  <ul class="pagination">
    <li class="disabled">
      <span>
      </span>
    </li>
    ...
  </ul>
</nav>
  • BrickPlus 提供了四种不同的分页尺寸，以备适应不同的特殊设计，其中三种非常规尺寸需通过给 .pagination-box 这一层叠加 .large-pagination / .small-pagination / .smaller-pagination 尺寸类展示。
实例
large pagination
default
small pagination
smaller pagination
            
<nav class="pagination-box large-pagination / small-pagination / smaller-pagination">
</nav>
  • .pagination 部件是一个行内块级元素，通过给 .pagination-box 这一层叠加排版工具类 .text-align-left，.text-align-center，.text-align-right 就能调整分页组件的排版位置。
实例
left
center
right
            
<nav class="pagination-box text-align-left / text-align-center / text-align-right">
</nav>
  • 通过和其他组件的组合，还可以得到一个更强大的分页工具；
    将要组合到的组件放在 .pagination-box 层下面，并套上一层 .p-add-ons，组合文本结构的话，只能在 .p-add-ons 这一层用 p 标签作为包裹包裹元素。
实例
            
<nav class="pagination-box">
  <div class="p-add-ons">
    ...
  </div>
  <p class="p-add-ons">
    ...
  </p>
</nav>