intro

Pagination

A navigation component to divide content into discrete pages.

O componente Pagination permite aos utilizadores navegar através de grandes conjuntos de dados ou conteúdos divididos em páginas múltiplas. Na linguagem visual COBOGÓ, a paginação implementa a estética “Curva & Concreto” com interatividade responsiva e foco em contraste.

Exemplo Interativo

Como Funciona

O componente aceita currentPage e totalPages.
Ele calcula automaticamente como apresentar as páginas, introduzindo truncatura (”…”) quando há mais de 7 páginas, para evitar que o componente ultrapasse o limite de espaço.
O componente dispara o evento onPageChange (via Svelte 5 callback prop) quando um botão é clicado.
Os botões seguem rigidamente os requisitos de WCAG AA com alto contraste para os anéis de foco e indicação de página atual (aria-current="page").

Código

<script>
  import { Pagination } from 'cobogo/components/Pagination';
  let currentPage = $state(1);
</script>

<Pagination
  {currentPage}
  totalPages={10}
  onPageChange={(page) => currentPage = page}
/>