Source

Paginacja

Dokumentacja i przykłady pokazujące podział na strony w celu wskazania, że na wielu stronach istnieje szereg powiązanych treści.

Przegląd

Używamy dużego bloku połączonych linków do naszej paginacji, dzięki czemu linki są trudne do przeoczenia i łatwe do skalowania – a wszystko to przy zapewnieniu dużych obszarów trafień. Paginacja jest zbudowana z elementów HTML listy, dzięki czemu czytniki ekranu mogą ogłaszać liczbę dostępnych linków. Użyj elementu zawijania <nav>, aby zidentyfikować go jako sekcję nawigacji dla czytników ekranu i innych technologii pomocniczych.

Ponadto, ponieważ strony prawdopodobnie zawierają więcej niż jedną taką sekcję nawigacji, zaleca się podanie opisu aria-label, <nav>który odzwierciedla jego cel. Na przykład, jeśli komponent podziału na strony jest używany do nawigowania między zestawami wyników wyszukiwania, odpowiednią etykietą może być 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>

Praca z ikonami

Chcesz użyć ikony lub symbolu zamiast tekstu w przypadku niektórych linków do stronicowania? Pamiętaj, aby zapewnić odpowiednią obsługę czytników ekranu z ariaatrybutami.

<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>
      </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>
      </a>
    </li>
  </ul>
</nav>

Stany wyłączone i aktywne

Linki do stronicowania można dostosować do różnych okoliczności. Używaj .disableddo linków, których nie można kliknąć, oraz .activedo wskazywania bieżącej strony.

Chociaż .disabledklasa pointer-events: nonepróbuje wyłączyć funkcjonalność łącza s, ta właściwość CSS nie jest jeszcze ustandaryzowana<a> i nie uwzględnia nawigacji za pomocą klawiatury. W związku z tym należy zawsze dodawać tabindex="-1"wyłączone linki i używać niestandardowego JavaScript, aby całkowicie wyłączyć ich funkcjonalność.

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

Możesz opcjonalnie zamienić aktywne lub wyłączone kotwice dla <span>lub pominąć kotwicę w przypadku strzałek poprzedni/następny, aby usunąć funkcję kliknięcia i zapobiec fokusowi klawiatury przy zachowaniu zamierzonych stylów.

<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" aria-current="page">
      <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>

Rozmiary

Masz ochotę na większą lub mniejszą paginację? Dodaj .pagination-lglub .pagination-smdla dodatkowych rozmiarów.

<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item active" aria-current="page">
      <span class="page-link">
        1
        <span class="sr-only">(current)</span>
      </span>
    </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 active" aria-current="page">
      <span class="page-link">
        1
        <span class="sr-only">(current)</span>
      </span>
    </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>

Wyrównanie

Zmień wyrównanie elementów paginacji za pomocą narzędzi 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" aria-disabled="true">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" aria-disabled="true">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>