Paginazione

La paginazione viene utilizzata per suddividere il contenuto o i dati in più pagine.
Qui potrai reperire la User Interface, lo snippet e le modalità di utilizzo per la paginazione nell'Ecosistema digitale Turismo Cultura.

                                            
<div class="dms-pagination d-flex justify-content-center">
    <nav aria-label="Page navigation example">
        <ul class="pagination">
            <li class="page-item">
                <a class="page-link disabled" href="#" aria-label="Precedente" title="precedente">
                    <span aria-hidden="true"><i class='dms-wk-icon-arrow-left'></i></span>
                    <span class="sr-only">Precedente</span>
                </a>
            </li>
            <li class="page-item"><a class="page-link current" href="#" title="Vai alla pagina">1</a></li>
            <li class="page-item"><a class="page-link" href="#" title="Vai alla pagina">2</a></li>
            <li class="page-item"><a class="page-link" href="#" title="Vai alla pagina">3</a></li>
            <li class="page-item"><a class="page-link" href="#" title="Vai alla pagina">4</a></li>
            <li class="page-item"><a class="page-link" href="#" title="Vai alla pagina">5</a></li>
            <li class="page-item"><a class="page-link" href="#" title="Vai alla pagina">6</a></li>
            <li class="page-item"><a class="page-link" href="#" title="Vai alla pagina">7</a></li>
            <li class="page-item"><a class="page-link" href="#" title="Vai alla pagina">8</a></li>
            <li class="page-item disabled">...</li>
            <li class="page-item"><a class="page-link" href="#" title="Vai alla pagina">25</a></li>
            <li class="page-item">
                <a class="page-link" href="#" aria-label="Successivo" title="Successivo">
                    <span aria-hidden="true"><i class='dms-wk-icon-arrow-right'></i></span>
                    <span class="sr-only">Successivo</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

Utilizzo

Occorre posizionare il componente al di sotto di una lista o di un elenco di card o in generale elementi da distribuire per pagine. Tuttavia, necessita di un'implementazione lato front-end per consentirne la dinamicità.