Paginazione
Il componente paginazione è utile per indicare la presenza di una serie di contenuti correlati, distribuiti tra più pagine di contenuto.
I collegamenti della paginazione sono contenuti per praticità in un elemento nav con classe pagination-wrapper
per dare la possibilità agli screenreader, e altre tecnologie assistive, di identificarli come una sezione di navigazione.
E' possibile che la pagina possa contenere più di un elemento nav per cui è consigliabile
inserire un attributo aria-label con la descrizione del suo scopo.
I link della paginazione assumonono uno stato disabilitato usando la classe .disabled nel tag
<li>. È inoltre consigliabile applicare aria-hidden="true" ai link disabilitati per evitare che vengano considerati nel conteggio degli elementi totali in lista fornito dagli screen reader.
Per indicare la pagina attiva corrente utilizzare l’attributo aria-current="page" nel tag <a>, l’aspetto grafico cambierà di conseguenza.
Aggiungendo al classe .pagination-total al tag <nav> che contiene la paginazione è possibile indicare il numero totale di pagine all’interno di un tag <p> collocato priam della chiusura del <nav>.
Riguardo all'accessibiiltà, si noti che la classe visually-hidden sotituisce in Bootstrap5 la classe sr-only.
Il tema garantisce compatibilità all'indietro, renderizzando sr-only - se ancora presente - in maniera analoga a visually-hidden
Esempio
<nav class="pagination-wrapper pagination-total" aria-label="Esempio di navigazione della pagina">
<ul class="pagination ">
<li class="page-item">
<a class="page-link" href="#">
<svg role="navigation" aria-describedby="my-title"class="icon icon-primary"><title id="my-title">my-title</title><use href="./dist/svg/sprite.svg#it-chevron-left"></use></svg>
<span class="visually-hidden">Pagina precedente</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#" aria-current="page">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item disabled"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">
<span class="visually-hidden">Pagina successiva</span>
<svg role="navigation" aria-describedby="my-title"class="icon icon-primary"><title id="my-title">my-title</title><use href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
</a>
</li>
</ul>
<p><span class="visually-hidden">Pagina</span> 1 di 16</p>
</nav>Alineamento
Grazie alle utilità di Flexbox, si può allineare facilmente il blocco della paginazione.
Sui dispositivi mobile la paginazione è centrata per default; sugli altri dispositivi, a sinistra.
Per centrare la navigazione aggiungere la classe justify-content-center al tag <nav>.
Per allineare a destra la navigazione aggiungere la classe justify-content-end al tag <nav>.
<nav class="pagination-wrapper justify-content-center" aria-label="Esempio di navigazione della pagina">
<ul class="pagination ">
<li class="page-item">
<a class="page-link" href="#">
<svg role="navigation" aria-describedby="my-title"class="icon icon-primary"><title id="my-title">my-title</title><use href="./dist/svg/sprite.svg#it-chevron-left"></use></svg>
<span class="visually-hidden">Pagina precedente</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#" aria-current="page">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item">
<a class="page-link" href="#">
<span class="visually-hidden">Pagina successiva</span>
<svg role="navigation" aria-describedby="my-title"class="icon icon-primary"><title id="my-title">my-title</title><use href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
</a>
</li>
</ul>
</nav>
<nav class="pagination-wrapper justify-content-end" aria-label="Esempio di navigazione della pagina">
<ul class="pagination ">
<li class="page-item">
<a class="page-link" href="#">
<svg role="navigation" aria-describedby="my-title"class="icon icon-primary"><title id="my-title">my-title</title><use href="./dist/svg/sprite.svg#it-chevron-left"></use></svg>
<span class="visually-hidden">Pagina precedente</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#" aria-current="page">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item">
<a class="page-link" href="#">
<span class="visually-hidden">Pagina successiva</span>
<svg role="navigation" aria-describedby="my-title"class="icon icon-primary"><title id="my-title">my-title</title><use href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
</a>
</li>
</ul>
</nav>Simple mode
La paginazione in versione “Simple mode” è ottimizzata per i dispositivi mobile. Può essere utilizzata anche su tablet e desktop quando il numero di pagine è ridotto.
<nav class="pagination-wrapper" aria-label="Esempio di navigazione simple mode">
<ul class="pagination" aria-label="Pagina 1 di 5">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-hidden="true">
<svg role="navigation" aria-describedby="my-title"class="icon icon-primary"><title id="my-title">my-title</title><use href="./dist/svg/sprite.svg#it-chevron-left"></use></svg>
<span class="visually-hidden">Pagina precedente</span>
</a>
</li>
<li class="page-item"><span class="page-link">1</span></li>
<li class="page-item"><span class="page-link">/</span></li>
<li class="page-item"><span class="page-link">5</span></li>
<li class="page-item visually-hidden">
<a class="page-link" href="#" aria-current="page">Pagina 1 di 5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
<span class="visually-hidden">Pagina successiva</span>
<svg role="navigation" aria-describedby="my-title"class="icon icon-primary"><title id="my-title">my-title</title><use href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
</a>
</li>
</ul>
</nav>