Нумерация страниц
Документация и примеры ссылок постраничного разделения серии связанного контента на несколько страниц.
Обзор
Мы используем большой блок связанных между собой ссылок для нумерации страниц, который делает ссылки легко заметными и доступными подсчету – и с большой «зоной клика». Нумерация страниц создана списком элементов HTML, так что экранные читалки могут объявлять число доступных страниц. Оборачивайте всё в <nav> для возможности определять эту секцию как секцию навигации для экранных читалок и прочих вспомогательных технологий.
В дополнение – так как страницы с большой вероятностью имеют более одной навигационной секции – рекомендуется описывать назначение <nav> через aria-label. Например – если компонент нумерации страниц используется для навигации между набором результатов поиска – правильным лейблом был бы aria-label="Search results pages".
<navaria-label="Page navigation example"><ulclass="pagination"><liclass="page-item"><aclass="page-link"href="#">Previous</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Next</a></li></ul></nav>Работа с иконками
Хотите использовать значок или символ вместо текста для некоторых ссылок на страницы? Убедитесь, что Вы обеспечили надлежащую поддержку программы чтения с экрана с атрибутами aria.
<navaria-label="Page navigation example"><ulclass="pagination"><liclass="page-item"><aclass="page-link"href="#"aria-label="Previous"><spanaria-hidden="true">«</span></a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#"aria-label="Next"><spanaria-hidden="true">»</span></a></li></ul></nav>Неактивные и активные состояния
Ссылки в нумерации страниц можно настраивать под разные обстоятельства. Используйте класс .disabled для ссылок, которые должны выглядеть некликабельными, и .active - для обозначения текущей страницы.
Хотя в классе .disabled для попытки деактивации ссылочной функциональности элементов <a> используется pointer-events: none, это свойство СSS еще не стандартизировано и не подходит для навигации с клавиатуры. Поэтому вам следует добавлять tabindex="-1" в деактивированные ссылки и использовать JavaScript для полной деактивации их функциональности.
<navaria-label="..."><ulclass="pagination"><liclass="page-item disabled"><aclass="page-link"href="#"tabindex="-1"aria-disabled="true">Предыдущая</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item active"aria-current="page"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Следующая</a></li></ul></nav>Вы можете по желанию заменить активные или отключенные привязки на <span> или опустить привязку в случае стрелок предыдущая/следующая, чтобы удалить функциональность клика и предотвратить фокусировку клавиатуры при сохранении заданных стилей.
<navaria-label="..."><ulclass="pagination"><liclass="page-item disabled"><spanclass="page-link">Предыдущая</span></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item active"aria-current="page"><spanclass="page-link">2</span></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Следующая</a></li></ul></nav>Размеры
Добавьте классы .pagination-lg или .pagination-sm для создания дополнительных размеров.
<navaria-label="..."><ulclass="pagination pagination-lg"><liclass="page-item active"aria-current="page"><spanclass="page-link">1</span></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li></ul></nav><navaria-label="..."><ulclass="pagination pagination-sm"><liclass="page-item active"aria-current="page"><spanclass="page-link">1</span></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li></ul></nav>Выравнивание
Изменяйте выравнивание элементов нумерации классами флексбокса.
<navaria-label="Пример навигации по страницам"><ulclass="pagination justify-content-center"><liclass="page-item disabled"><aclass="page-link"href="#"tabindex="-1"aria-disabled="true">Предыдущая</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Следующая</a></li></ul></nav><navaria-label="Пример навигации по страницам"><ulclass="pagination justify-content-end"><liclass="page-item disabled"><aclass="page-link"href="#"tabindex="-1"aria-disabled="true">Предыдущая</a></li><liclass="page-item"><aclass="page-link"href="#">1</a></li><liclass="page-item"><aclass="page-link"href="#">2</a></li><liclass="page-item"><aclass="page-link"href="#">3</a></li><liclass="page-item"><aclass="page-link"href="#">Следующая</a></li></ul></nav>