Vox Mente
Navegação

Componentes

Pagination

beta

Divide uma lista longa em páginas. É controle de navegação, então cada página precisa ser endereçável.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/pagination

Playground
<PaginationLink href="#" size="icon-md" isActive>2</PaginationLink>
<PaginationNext href="#" text="Próxima turma" />

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
Pagination
  └─ PaginationContent
    └─ PaginationItem
      └─ PaginationPrevious
    └─ PaginationItem
      └─ PaginationLink
    └─ PaginationItem
      └─ PaginationLink
    └─ PaginationItem
      └─ PaginationLink
    └─ PaginationItem
      └─ PaginationNext

Uso

Navega entre páginas de uma lista longa — uma turma com muitos alunos, um histórico de sessões. Cada `PaginationLink` é uma âncora de verdade, não um botão que dispara estado escondido.

Anterior e próximo

`PaginationPrevious` e `PaginationNext` aceitam `text` para trocar o rótulo — o texto some em telas estreitas e sobra só o ícone.

Colapsado

Com muitas páginas, esconda o meio atrás de `PaginationEllipsis` em vez de listar todos os números — uma lista de 40 alunos não precisa de 40 botões.

Tamanho

`PaginationLink` recebe `size` do `Button` — o padrão é `icon-md`, quadrado o bastante para caber só o número. Use `md` quando o rótulo for texto, como em `PaginationPrevious`.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

PaginationLink

PropTipoPadrão
isActiveboolean—
size"md" | "xs" | "sm" | "lg" | "icon-md" | "icon-xs" | "icon-sm" | "icon-lg" | null"icon-md"

Também aceita as props de React, incluindo className e os atributos de DOM.

PaginationNext

PropTipoPadrão
isActiveboolean—
size"md" | "xs" | "sm" | "lg" | "icon-md" | "icon-xs" | "icon-sm" | "icon-lg" | null—
textstring"Next"

Também aceita as props de React, incluindo className e os atributos de DOM.

PaginationPrevious

PropTipoPadrão
isActiveboolean—
size"md" | "xs" | "sm" | "lg" | "icon-md" | "icon-xs" | "icon-sm" | "icon-lg" | null—
textstring"Previous"

Também aceita as props de React, incluindo className e os atributos de DOM.

Pagination, PaginationContent, PaginationEllipsis, PaginationItem não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css