分页

分页是一种导航类型，允许用户点击浏览搜索结果、产品或其他相关项目的页面。

基础知识

分页列表只是一个带有 .pagination 类的 <ul>，以及一系列 <li>/<a> 对。将 .current 类添加到 <li> 以标记当前页面，或将 .disabled 添加到链接以添加禁用样式。

请注意，列表嵌套在带有 aria-label="Pagination" 属性的 <nav> 中。这向辅助技术解释了组件的目的。

还应向分页元素添加额外的仅限屏幕阅读器文本。在下面的示例中，阅读页面的用户只会看到“下一页”和“上一页”，但屏幕阅读器会将其读作“下一页”和“上一页”。此外，当前页面的文本将读作“您在第一页”。

<nav aria-label="Pagination">
  <ul class="pagination">
    <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><a href="#" aria-label="Page 3">3</a></li>
    <li><a href="#" aria-label="Page 4">4</a></li>
    <li class="ellipsis" aria-hidden="true"></li>
    <li><a href="#" aria-label="Page 12">12</a></li>
    <li><a href="#" aria-label="Page 13">13</a></li>
    <li class="pagination-next"><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
  </ul>
</nav>

居中

分页列表中的项目是 display: inline-block，这使得它们很容易居中。使用我们内置的 .text-center 类，或在您的 CSS 中添加 text-align: center。

观看视频中的这部分内容

<nav aria-label="Pagination">
  <ul class="pagination text-center">
    <li class="pagination-previous disabled">Previous</li>
    <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
    <li><a href="#" aria-label="Page 2">2</a></li>
    <li><a href="#" aria-label="Page 3">3</a></li>
    <li><a href="#" aria-label="Page 4">4</a></li>
    <li class="ellipsis"></li>
    <li><a href="#" aria-label="Page 12">12</a></li>
    <li><a href="#" aria-label="Page 13">13</a></li>
    <li class="pagination-next"><a href="#" aria-label="Next page">Next</a></li>
  </ul>
</nav>

Sass 参考

变量

可以使用您项目设置文件中的以下 Sass 变量来自定义此组件的默认样式。

名称	类型	默认值	描述
`$pagination-font-size`	数字	`rem-calc(14)`	分页项目的字体大小。
`$pagination-margin-bottom`	数字	`$global-margin`	分页对象的默认底部边距。
`$pagination-item-color`	颜色	`$black`	分页项目的文本颜色。
`$pagination-item-padding`	数字	`rem-calc(3 10)`	分页项目内的填充。
`$pagination-item-spacing`	数字	`rem-calc(1)`	用于分隔分页项目的右边距。
`$pagination-radius`	数字	`$global-radius`	分页项目的默认半径。
`$pagination-item-background-hover`	颜色	`$light-gray`	悬停时分页项目的背景颜色。
`$pagination-item-background-current`	颜色	`$primary-color`	当前页面的分页项目的背景颜色。
`$pagination-item-color-current`	颜色	`$white`	当前页面的分页项目的文本颜色。
`$pagination-item-color-disabled`	颜色	`$medium-gray`	禁用分页项目的文本颜色。
`$pagination-ellipsis-color`	颜色	`$black`	分页菜单中省略号的颜色。
`$pagination-mobile-items`	布尔值	`false`	如果为 `false`，则不在移动设备上显示页码链接，仅显示上一页/下一页链接以及可选的当前页码。
`$pagination-mobile-current-item`	布尔值	`false`	如果为 `true`，则即使 `$pagination-mobile-items` 设置为 `false`，也会在移动设备上显示当前页码。此参数将仅覆盖 `$pagination-mobile-items: false;` 时当前项目的可见性设置，当 `$pagination-mobile-items` 设置为 `true` 时，它不会影响当前页码的可见性。
`$pagination-arrows`	布尔值	`true`	如果为 `true`，则将箭头添加到分页的上一页和下一页链接。
`$pagination-arrow-previous`	字符串	`'\00AB'`	当 `$pagination-arrows` 为 `true` 时，上一页箭头的的内容
`$pagination-arrow-next`	字符串	`'\00BB'`	当 `$pagination-arrows` 为 `true` 时，下一页箭头的的内容

混合

我们使用这些混合来构建此组件的最终 CSS 输出。您可以自己使用混合来从我们的组件中构建自己的类结构。

pagination-container

@include pagination-container;

添加分页容器的样式。将其应用于 <ul>。

pagination-item-current

@include pagination-item-current;

添加当前分页项目的样式。将其应用于 <a>。

pagination-item-disabled

@include pagination-item-disabled;

添加禁用分页项目的样式。将其应用于 <a>。

pagination-ellipsis

@include pagination-ellipsis;

添加用于分页列表中的省略号的样式。