Source

Stránkování

Dokumentace a příklady pro zobrazení stránkování k označení řady souvisejícího obsahu existuje na více stránkách.

Přehled

Pro stránkování používáme velký blok propojených odkazů, takže odkazy je těžké přehlédnout a lze je snadno škálovat – to vše při poskytování velkých oblastí přístupu. Stránkování je vytvořeno s prvky HTML seznamu, takže čtečky obrazovky mohou oznámit počet dostupných odkazů. Pomocí obtékajícího <nav>prvku jej identifikujte jako navigační sekci pro čtečky obrazovky a další pomocné technologie.

Kromě toho, protože stránky pravděpodobně mají více než jednu takovou navigační sekci, je vhodné poskytnout popis aria-label, <nav>aby odrážel její účel. Pokud se například komponenta stránkování používá k navigaci mezi sadou výsledků vyhledávání, může být vhodný štítek 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>

Práce s ikonami

Chcete použít ikonu nebo symbol místo textu pro některé stránkovací odkazy? Ujistěte se, že poskytujete správnou podporu pro čtení obrazovky s ariaatributy a .sr-onlynástrojem.

<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>

Deaktivované a aktivní stavy

Odkazy stránkování lze přizpůsobit různým okolnostem. Použijte .disabledpro odkazy, na které nelze kliknout, a .activepro označení aktuální stránky.

I když se třída pokouší.disabled zakázat pointer-events: nonefunkci propojení s, tato vlastnost CSS ještě není standardizovaná a nezohledňuje navigaci pomocí klávesnice. Proto byste měli vždy přidávat zakázané odkazy a používat vlastní JavaScript, abyste plně deaktivovali jejich funkčnost.<a>tabindex="-1"

<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>

Volitelně můžete vyměnit aktivní nebo deaktivované kotvy za <span>nebo vynechat kotvu v případě šipek předchozí/další, abyste odstranili funkci kliknutí a zabránili zaměření klávesnice při zachování zamýšlených stylů.

<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>

Dimenzování

Máte chuť na větší nebo menší stránkování? Přidejte .pagination-lgnebo .pagination-smpro další velikosti.

<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>

Zarovnání

Změňte zarovnání komponent stránkování pomocí nástrojů 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>