Paginação

href é uma função do número da página para o URL, por isso a paginação serve tanto para /blog/2 como para /blog?page=2. Isso faz de cada página uma ligação a sério — rastreável, abrível num separador novo, e a funcionar sem JavaScript, que é o que um site estático quer.

Paginação básica

pagination({ page: 1, count: 5, href: (page) => '#page-' + page })

Janela

A primeira e a última página aparecem sempre, mais uma janela à volta da atual, com reticências onde a sequência dá um salto.

stack({ gap: 'md' },
  pagination({ page: 1, count: 12, href: (page) => '#a-' + page }),
  pagination({ page: 6, count: 12, href: (page) => '#b-' + page }),
  pagination({ page: 12, count: 12, href: (page) => '#c-' + page }),
)

Vizinhas

siblings é quantas páginas ficam de cada lado da atual.

stack({ gap: 'md' },
  pagination({ page: 6, count: 12, siblings: 0, href: (page) => '#d-' + page }),
  pagination({ page: 6, count: 12, siblings: 1, href: (page) => '#e-' + page }),
  pagination({ page: 6, count: 12, siblings: 3, href: (page) => '#f-' + page }),
)

Extremos

O anterior fica desativado na primeira página e o seguinte na última, por isso o controlo nunca oferece uma página que não existe.

stack({ gap: 'md' },
  pagination({ page: 1, count: 3, href: (page) => '#g-' + page }),
  pagination({ page: 3, count: 3, href: (page) => '#h-' + page }),
  pagination({ page: 1, count: 1, href: (page) => '#i-' + page }),
)

Cores e etiquetas

stack({ gap: 'md' },
  pagination({ page: 3, count: 6, color: 'neutral', href: (page) => '#j-' + page }),
  pagination({
    page: 3,
    count: 6,
    color: 'success',
    previousLabel: 'Mais recentes',
    nextLabel: 'Mais antigos',
    href: (page) => '#k-' + page,
  }),
)

Sem hrefs

Sem href, os números são desenhados como botões com data-su-page — para uma página que filtra no lugar com um script seu. Prefere ligações sempre que puderes: sobrevivem a ter o JavaScript desligado.

pagination({ page: 2, count: 4 })

Num blogue

A forma habitual num site estático: generateStaticParams produz uma página por fatia, e href aponta para elas.

A mostrar 21–30 de 47

return (() => {
  const posts = 47
  const perPage = 10
  const current = 3

  return stack({ gap: 'md', align: 'center' },
    text({ variant: 'small', tone: 'muted' },
      'A mostrar ' + ((current - 1) * perPage + 1) + '–' + Math.min(current * perPage, posts) + ' de ' + posts,
    ),
    pagination({
      page: current,
      count: Math.ceil(posts / perPage),
      href: (page) => page === 1 ? '#blog' : '#blog-' + page,
    }),
  )
})()

Props

Prop	Tipo	Predefinição	Descrição
`page`	`number`	`1`	A página atual. Ajustada ao intervalo válido.
`count`	`number`	`1`	Quantas páginas existem.
`href`	`(page: number) => string`	—	Número da página para URL. Sem ele, as páginas são botões.
`siblings`	`number`	`1`	Páginas mostradas de cada lado da atual.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Cor da página atual.
`label`	`string`	`'Pagination'`	Nome acessível do marco nav.
`previousLabel`	`Child`	`'‹'`	Conteúdo do controlo anterior.
`nextLabel`	`Child`	`'›'`	Conteúdo do controlo seguinte.