分页
用于显示分页,显示跨越多页面的一系列文档或者实例。更新于: 2023-04-30 14:28:21 查看: 409
发布于: 2021-9-6 15:30 发布者: 大米
概述
我们在分页中使用了大量的连接链接,从而使链接不易丢失且易于扩展-同时还提供了较大的点击范围。 分页是使用列表HTML元素构建的,因此屏幕阅读器可以宣布可用链接的数量。 使用包装的<nav>
元素将其标识为屏幕阅读器和其他辅助技术的导航部分。
另外,由于页面可能具有多个这样的导航部分,因此建议为 <nav>
提供一个描述性的 aria-label
,以反映其目的。 例如,如果使用分页组件在一组搜索结果之间导航,则适当的标签可以是 aria-label="Search results pages"
。
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
分页组件图标
想要在某些分页链接中使用图标或符号代替文本? 确保提供适当的带有
aria
属性的屏幕阅读器支持。
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
禁用/活动状态
分页链接可针对不同情况进行定制。 使用
.disabled
来显示不可点击和.active
的链接以指示当前页面。
当在 .disabled
时使用 pointer-events: none
:没有试图禁用 <a> 的链接功能的方法,但是CSS属性尚未标准化,因此无法解决键盘导航问题。 因此,您应始终在禁用的链接上添加 tabindex="-1"
并使用自定义JavaScript完全禁用其功能。
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
您可以选择将活动锚或禁用锚替换为 <span>
,或者在上一个/下一个箭头的情况下忽略该锚,以删除单击功能并在保留预期样式的同时防止键盘聚焦。
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">Previous</span>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active" aria-current="page">
<span class="page-link">2</span>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
分页组件大小
喜欢更大或更小的分页? 添加.pagination-lg
或.pagination-sm
以获得其他大小。
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
</ul>
</nav>
对齐方式
使用flexbox实用程序更改分页组件的对齐方式。
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
扫描二维码,手机查看
声明:部分数据/图片来源互联网,不代表Hluse Doc.,真实性请妥善甄别。