Постраничное разделение
Ссылки постраничного разделения указывают на то, что существует ряд связанных между собой материалов на нескольких страницах. Обычно они используются там, где многостраничный подход к длинным спискам контента улучшает общую производительность, например, в результатах поиска.
Содержание
- Содержание
- Обзор
- Работа с иконками
- Заблокированные и активные состояния
- Изменение размера
- Выравнивание
Обзор
Мы используем большой блок подключаемых ссылок для нашего постраничного разделения, делая ссылки легко масштабируемыми - обеспечивая при этом большие площади попадания. Постраничное разделение построено со списком элементов HTML, поэтому скринридеры (программы чтения с экрана) могут объявить количество доступных ссылок. Используйте элемент <nav>, чтобы идентифицировать его как раздел навигации для скринридеров и других ассистивных технологий.
Кроме того, поскольку страницы, вероятно, имеют более одного такого раздела навигации, рекомендуется предоставить описательный aria-label для <nav>, чтобы отразить ее назначение. Например, если компонент постраничного разделения используется для навигации между набором результатов поиска, подходящей меткой может быть 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 и утилитой .sr-only.
<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>
<span class="sr-only">Previous</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>
<span class="sr-only">Next</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">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></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">
<span class="page-link">
2
<span class="sr-only">(current)</span>
</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 disabled">
<a class="page-link" href="#" tabindex="-1">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="...">
<ul class="pagination pagination-sm">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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>Выравнивание
Измените выравнивание компонентов постраничного разделения с помощью flexbox utilities.
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">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">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>