SWCore / Componentes / Pagination

Pagination Componentes

Paginação numérica com indicador deslizante e reticências para muitas páginas.

O que é

Navegação entre páginas de resultados — números, setas anterior/próxima, reticências quando há páginas demais pra mostrar todas.

Como funciona

Calcula quais números mostrar (sempre 1 e a última, mais uma janela ao redor da atual) e injeta reticências no meio. Um thumb deslizante acompanha o número ativo, reposicionando no resize (por causa do flex-wrap em telas estreitas).

Exemplos

Padrão, com pontas (sw-pagination-ends) Ao vivo 
<nav sw-pagination sw-pagination-total="230" sw-pagination-per="10" sw-pagination-cur="4" sw-pagination-ends></nav>
Tamanhos — is-sm e is-lg Ao vivo 
<div class="demo-row">
  <nav sw-pagination class="is-sm" sw-pagination-total="50" sw-pagination-per="10" sw-pagination-cur="2"></nav>
  <nav sw-pagination class="is-lg" sw-pagination-total="50" sw-pagination-per="10" sw-pagination-cur="2"></nav>
</div>
is-pil e is-gst Ao vivo 
<div class="demo-row">
  <nav sw-pagination class="is-pil" sw-pagination-total="50" sw-pagination-per="10" sw-pagination-cur="3"></nav>
  <nav sw-pagination class="is-gst" sw-pagination-total="50" sw-pagination-per="10" sw-pagination-cur="3"></nav>
</div>

Atributos

sw-pagination-total
total de itens (não de páginas)
sw-pagination-per
itens por página
sw-pagination-cur
página atual (1-based)
sw-pagination-delta
quantos números mostrar ao redor da página atual (padrão 2)
sw-pagination-ends
mostra botões de "primeira"/"última" página nas pontas

Variantes

is-sm / is-lg
tamanhos
is-pil
cantos totalmente arredondados
is-gst
"ghost" — ativo sem fundo sólido, só sublinhado

Eventos

sw:pagination:change
{ page }

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

  • Só a paginação em si — não busca dados nem troca conteúdo sozinha; escute sw:pagination:change pra carregar a página nova.
← AnteriorVoltar ao topo Próximo →Alert / Toast