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 čtečky obrazovky s aria
atributy.
<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>
</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>
</a>
</li>
</ul>
</nav>
Deaktivované a aktivní stavy
Odkazy stránkování lze přizpůsobit různým okolnostem. Použijte .disabled
pro odkazy, na které nelze kliknout, a .active
pro označení aktuální stránky.
I když se třída pokouší.disabled
zakázat pointer-events: none
funkci 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">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</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" aria-current="page">
<span class="page-link">2</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-lg
nebo .pagination-sm
pro další velikosti.
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item active" aria-current="page">
<span class="page-link">1</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>
</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">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">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>