Impaginazione
Documentazione ed esempi per mostrare l'impaginazione per indicare che una serie di contenuti correlati esiste su più pagine.
Panoramica
Usiamo un grande blocco di link collegati per la nostra impaginazione, rendendo i link difficili da perdere e facilmente scalabili, il tutto fornendo ampie aree di successo. L'impaginazione è costruita con elementi HTML elenco in modo che gli screen reader possano annunciare il numero di collegamenti disponibili. Utilizzare un <nav>
elemento di wrapping per identificarlo come una sezione di navigazione per le utilità per la lettura dello schermo e altre tecnologie assistive.
Inoltre, poiché le pagine hanno probabilmente più di una di queste sezioni di navigazione, è consigliabile fornire una descrizione aria-label
che ne <nav>
rifletta lo scopo. Ad esempio, se il componente di impaginazione viene utilizzato per navigare tra una serie di risultati di ricerca, un'etichetta appropriata potrebbe essere 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>
Lavorare con le icone
Stai cercando di utilizzare un'icona o un simbolo al posto del testo per alcuni collegamenti di impaginazione? Assicurati di fornire un adeguato supporto per la lettura dello schermo con gli aria
attributi.
<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>
Stati disabili e attivi
I collegamenti di impaginazione sono personalizzabili per diverse circostanze. Utilizzare .disabled
per i collegamenti che sembrano non selezionabili e .active
per indicare la pagina corrente.
Sebbene la .disabled
classe utilizzi pointer-events: none
per provare a disabilitare la funzionalità di collegamento di <a>
s, quella proprietà CSS non è ancora standardizzata e non tiene conto della navigazione da tastiera. Pertanto, dovresti sempre aggiungere tabindex="-1"
collegamenti disabilitati e utilizzare JavaScript personalizzato per disabilitarne completamente la funzionalità.
<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>
Puoi facoltativamente sostituire gli ancoraggi attivi o disabilitati con <span>
, o omettere l'ancora nel caso delle frecce precedente/successivo, per rimuovere la funzionalità di clic e impedire lo stato attivo della tastiera mantenendo gli stili desiderati.
<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>
Dimensionamento
Hai voglia di un'impaginazione più grande o più piccola? Aggiungi .pagination-lg
o .pagination-sm
per dimensioni aggiuntive.
<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>
Allineamento
Modificare l'allineamento dei componenti di impaginazione con le utilità 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>