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>