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>