Pagination
Navegacao entre paginas de resultados com estados ativo e desabilitado. Bordas solidas e estilo brutalista consistente.
Paginacao Basica
Preview
HTML
<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
Primeira pagina (anterior desabilitado)
Ultima pagina (proximo desabilitado)
HTML
<!-- 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
Apenas anterior / proximo
HTML
<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 (...) |