T2 EducaçãoMidas

Pagination

Navegação entre páginas: Pagination, PaginationContent, PaginationItem, PaginationLink (página atual em outline), PaginationPrevious, PaginationNext e PaginationEllipsis, mais o helper getPageRange para calcular as páginas com reticências.

Código-fonte

Exemplos

Interaja com o componente e copie o código de cada exemplo.

Com reticências

Usando getPageRange para calcular as páginas.

Linhas por página

import {
  getPageRange,
  Pagination,
  PaginationContent,
  PaginationEllipsis,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@t2-educacao/midas";

Uso

<Pagination>
  <PaginationContent>
    <PaginationItem><PaginationPrevious href="?pagina=1" /></PaginationItem>
    <PaginationItem><PaginationLink href="?pagina=1">1</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="?pagina=2" isActive>2</PaginationLink></PaginationItem>
    <PaginationItem><PaginationLink href="?pagina=3">3</PaginationLink></PaginationItem>
    <PaginationItem><PaginationEllipsis /></PaginationItem>
    <PaginationItem><PaginationNext href="?pagina=3" /></PaginationItem>
  </PaginationContent>
</Pagination>

Componentes

ComponenteO que é
Pagination<nav aria-label="Paginação">
PaginationContent / PaginationItemLista e itens
PaginationLinkLink de página (32px). isActive marca a atual (aria-current="page")
PaginationPrevious / PaginationNextAnterior e próxima (pill). label muda o texto
PaginationEllipsis"…" para páginas ocultas

PaginationLink é um <a> com o visual de botão. Para navegação client-side no Next.js, monte o link com Link e buttonVariants: <Link href="?pagina=2" className={buttonVariants({ variant: "ghost", size: "icon" })}>2</Link>.

getPageRange

Calcula quais páginas mostrar, sempre com o mesmo número de itens:

getPageRange(1, 20);  // [1, 2, 3, 4, 5, "ellipsis-end", 20]
getPageRange(10, 20); // [1, "ellipsis-start", 9, 10, 11, "ellipsis-end", 20]
getPageRange(20, 20); // [1, "ellipsis-start", 16, 17, 18, 19, 20]

As reticências vêm como "ellipsis-start" e "ellipsis-end", que também servem de key no React. O terceiro argumento (siblings, padrão 1) define quantas páginas aparecem ao lado da atual.

function Paginacao({ atual, total }: { atual: number; total: number }) {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href={`?pagina=${atual - 1}`} aria-disabled={atual === 1} />
        </PaginationItem>
        {getPageRange(atual, total).map((item) =>
          typeof item === "string" ? (
            <PaginationItem key={item}><PaginationEllipsis /></PaginationItem>
          ) : (
            <PaginationItem key={item}>
              <PaginationLink href={`?pagina=${item}`} isActive={item === atual}>{item}</PaginationLink>
            </PaginationItem>
          ),
        )}
        <PaginationItem>
          <PaginationNext href={`?pagina=${atual + 1}`} aria-disabled={atual === total} />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

Exemplos

Só ícones, com linhas por página

<div className="flex items-center gap-4">
  <Field orientation="horizontal" className="w-fit">
    <FieldLabel htmlFor="linhas">Linhas por página</FieldLabel>
    <Select defaultValue="25">
      <SelectTrigger id="linhas" className="w-20"><SelectValue /></SelectTrigger>
      <SelectContent>
        <SelectItem value="10">10</SelectItem>
        <SelectItem value="25">25</SelectItem>
        <SelectItem value="50">50</SelectItem>
      </SelectContent>
    </Select>
  </Field>
  <Pagination className="mx-0 w-auto">
    <PaginationContent>
      <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
      <PaginationItem><PaginationNext href="#" /></PaginationItem>
    </PaginationContent>
  </Pagination>
</div>

Acessibilidade

  • Use aria-disabled em anterior/próxima nas pontas (o link fica esmaecido e sem clique).
  • Os links de anterior e próxima já têm nomes descritivos para leitores de tela.

NativeSelect

O <select> nativo do navegador com o visual do Midas. Ideal para formulários simples e mobile (abre o seletor do sistema). Tamanhos default e sm.

Popover

Painel flutuante aberto por clique, para conteúdo rico e interativo (formulários curtos, detalhes, filtros). Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverTitle, PopoverDescription, PopoverClose e PopoverAnchor.

On this page

UsoComponentesgetPageRangeExemplosSó ícones, com linhas por páginaAcessibilidade