JS Component

Pagination Y2Pagina

Paginação gerada dinamicamente - com reticências automáticas, cores, tamanhos, pill e ghost.

1. Demo ao Vivo

Padrão (50 itens, 10 por página)

Pill (.is-pil)

Ghost (.is-gst)

Pequeno (.is-sm)

2. HTML Manual (sem JS)

3. Reagir à Mudança de Página

const pag = document.querySelector('[y2pagina]');

pag.addEventListener('yd:y2pagina:change', e => {
  const { page } = e.detail;
  console.log('Página:', page);
  carregarDados(page); // sua função
});

Quick Reference

Atributo / Classe Elemento Descrição
y2pagina nav Gera a paginação automaticamente
y2pagina-total nav Total de itens
y2pagina-per nav Itens por página (padrão: 10)
y2pagina-cur nav Página atual inicial
y2pagina-delta nav Páginas vizinhas exibidas (padrão: 2)
.is-pil nav Estilo pill (bordas arredondadas)
.is-gst nav Ghost (sem bordas)
.is-sm / .is-lg nav Tamanho reduzido / ampliado
.y2pagina-it a / span Item manual de paginação
yd:y2pagina:change evento Disparado ao mudar de página - detail: { page }