Source

Пагінація

Документація та приклади для показу розбивки сторінок для позначення серії пов’язаного вмісту існують на кількох сторінках.

Огляд

Ми використовуємо великий блок пов’язаних посилань для нашої розбивки на сторінки, завдяки чому посилання важко пропустити та легко масштабувати, забезпечуючи при цьому великі області звернення. Пагінація побудована за допомогою спискових 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">&laquo;</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">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>

Відключений і активний стани

Посилання на сторінки можна налаштувати для різних обставин. Використовуйте .disabledдля посилань, які не можна натиснути, і .activeдля позначення поточної сторінки.

Хоча цей .disabledклас pointer-events: noneнамагається вимкнути функцію посилання <a>s, ця властивість 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">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>
  </ul>
</nav>

<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#" tabindex="-1">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>
  </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">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>