组件

Pagination 分页

分页导航：当前页、禁用上一页/下一页；链接 :focus-visible 焦点环。

默认

<ul class="pvs-pagination">
  <li class="pvs-pagination__item--disabled">
    <span class="pvs-pagination__link">‹</span>
  </li>
  <li class="pvs-pagination__item--active">
    <a class="pvs-pagination__link" href="#">1</a>
  </li>
  <li>
    <a class="pvs-pagination__link" href="#">2</a>
  </li>
  <li>
    <a class="pvs-pagination__link" href="#">3</a>
  </li>
  <li>
    <a class="pvs-pagination__link" href="#">›</a>
  </li>
</ul>

链接修饰

也可直接在 a.pvs-pagination__link 上加 --active / --disabled。

<ul class="pvs-pagination">
  <li>
    <a class="pvs-pagination__link pvs-pagination__link--disabled" href="#">‹</a>
  </li>
  <li>
    <a class="pvs-pagination__link pvs-pagination__link--active" href="#">1</a>
  </li>
  <li>
    <a class="pvs-pagination__link" href="#">2</a>
  </li>
</ul>

尺寸

<div class="pvs-stack">
  <ul class="pvs-pagination pvs-pagination--sm">
    <li>
      <a class="pvs-pagination__link pvs-pagination__link--active" href="#">1</a>
    </li>
    <li>
      <a class="pvs-pagination__link" href="#">2</a>
    </li>
  </ul>
  <ul class="pvs-pagination pvs-pagination--lg">
    <li>
      <a class="pvs-pagination__link pvs-pagination__link--active" href="#">1</a>
    </li>
    <li>
      <a class="pvs-pagination__link" href="#">2</a>
    </li>
  </ul>
</div>

类名速查

类名	说明
`pvs-pagination`	ul 根
`pvs-pagination__link`	页码链接
`pvs-pagination__item--active`	li 当前页
`pvs-pagination__item--disabled`	li 禁用
`pvs-pagination__link--active / --disabled`	链接级状态
`pvs-pagination--sm / --lg`	紧凑 / 大号