Pagination | DS CANTA.

Paginacao Basica

<nav class="canta-pagination">
  <a href="#" class="canta-pagination__item">
    <span class="material-symbols-rounded">chevron_left</span>
  </a>
  <a href="#" class="canta-pagination__item">1</a>
  <a href="#" class="canta-pagination__item canta-pagination__item--active">2</a>
  <a href="#" class="canta-pagination__item">3</a>
  <a href="#" class="canta-pagination__item">4</a>
  <a href="#" class="canta-pagination__item">5</a>
  <a href="#" class="canta-pagination__item">
    <span class="material-symbols-rounded">chevron_right</span>
  </a>
</nav>

Estados: Ativo e Desabilitado

<!-- Item ativo -->
<a href="#" class="canta-pagination__item canta-pagination__item--active">1</a>

<!-- Item desabilitado (use span ao inves de a) -->
<span class="canta-pagination__item canta-pagination__item--disabled">
  <span class="material-symbols-rounded">chevron_left</span>
</span>

<!-- Ellipsis -->
<span class="canta-pagination__item canta-pagination__item--ellipsis">...</span>

Paginacao Compacta

<nav class="canta-pagination">
  <a href="#" class="canta-pagination__item">
    <span class="material-symbols-rounded">chevron_left</span>
    Anterior
  </a>
  <a href="#" class="canta-pagination__item">
    Proximo
    <span class="material-symbols-rounded">chevron_right</span>
  </a>
</nav>

API

Classe	Descricao
`.canta-pagination`	Container principal da paginacao (nav)
`.canta-pagination__item`	Item individual (numero, seta)
`.canta-pagination__item--active`	Pagina atual / selecionada
`.canta-pagination__item--disabled`	Item desabilitado (nao clicavel)
`.canta-pagination__item--ellipsis`	Indicador de paginas omitidas (...)