Постраничное разделение

Ссылки постраничного разделения указывают на то, что существует ряд связанных между собой материалов на нескольких страницах. Обычно они используются там, где многостраничный подход к длинным спискам контента улучшает общую производительность, например, в результатах поиска.

Обзор

Мы используем большой блок подключаемых ссылок для нашего постраничного разделения, делая ссылки легко масштабируемыми - обеспечивая при этом большие площади попадания. Постраничное разделение построено со списком элементов 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="#">Предыдущий</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="#">Следующий</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">Следующий</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="#">Следующий</a>
    </li>
  </ul>
</nav>

Дополнительно вы можете изменять активные или заблокированые якоря для <span> или пропустить привязку якоря в случае предыдущих/следующих стрелок, для удаления функциональности клика и предотвращения фокусировки клавиатуры при сохранении целевых стилей.

<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <span class="page-link">Предыдущий</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="#">Следующий</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="#">Следующий</a>
    </li>
  </ul>
</nav>

Выравнивание

Измените выравнивание компонентов постраничного разделения с помощью флексбокс утилит.

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">Предыдущий</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="#">Следующий</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">Предыдущий</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="#">Следующий</a>
    </li>
  </ul>
</nav>