AppPagination

Moléculas

Navegação entre páginas de uma lista, controlada por page e onPageChange.

Quando usar: listas longas divididas em páginas (ganhadores, notas fiscais, resultados), no rodapé da página ou de um card.

Quando não usar: passos de um fluxo sequencial ou carregamento infinito; use o componente de etapas ou um botão "Ver mais" (AppButton).

Acessibilidade: é um <nav> com aria-label "Paginação" (sobrescreva se houver mais de uma) e a página atual recebe aria-current="page". Em telas estreitas o CSS reduz os números exibidos.

Importar

import { AppPagination } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppPagination.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppPagination.css';

Exemplos

Default

const Default = () => {
    const [page, setPage] = useState(initialPage)

    return (
        <AppPagination
            pageCount={10}
            page={page}
            onPageChange={(next) => {
              setPage(next)
              onPageChange(next)
            }} />
    );
};

Card

const Card = () => {
    const [page, setPage] = useState(initialPage)

    return (
        <AppPagination
            pageCount={10}
            appearance="card"
            page={page}
            onPageChange={(next) => {
              setPage(next)
              onPageChange(next)
            }} />
    );
};

Circle

const Circle = () => {
    const [page, setPage] = useState(initialPage)

    return (
        <AppPagination
            pageCount={10}
            shape="circle"
            page={page}
            onPageChange={(next) => {
              setPage(next)
              onPageChange(next)
            }} />
    );
};

Details Right

const DetailsRight = () => {
    const [page, setPage] = useState(initialPage)

    return (
        <AppPagination
            pageCount={10}
            layout="details"
            align="right"
            page={page}
            onPageChange={(next) => {
              setPage(next)
              onPageChange(next)
            }} />
    );
};

Details Center

const DetailsCenter = () => {
    const [page, setPage] = useState(initialPage)

    return (
        <AppPagination
            pageCount={10}
            layout="details"
            align="center"
            page={page}
            onPageChange={(next) => {
              setPage(next)
              onPageChange(next)
            }} />
    );
};

Details Left

const DetailsLeft = () => {
    const [page, setPage] = useState(initialPage)

    return (
        <AppPagination
            pageCount={10}
            layout="details"
            align="left"
            page={page}
            onPageChange={(next) => {
              setPage(next)
              onPageChange(next)
            }} />
    );
};

Group

const Group = () => {
    const [page, setPage] = useState(initialPage)

    return (
        <AppPagination
            pageCount={10}
            layout="group"
            align="right"
            page={page}
            onPageChange={(next) => {
              setPage(next)
              onPageChange(next)
            }} />
    );
};

Last Page

const LastPage = () => {
    const [page, setPage] = useState(initialPage)

    return (
        <AppPagination
            pageCount={10}
            page={page}
            onPageChange={(next) => {
              setPage(next)
              onPageChange(next)
            }} />
    );
};

Props

Prop	Tipo	Padrão	Descrição
`onPageChange`*	`(page: number) => void`	`—`	Chamada com o número da nova página ao navegar; não dispara para a página atual nem fora do intervalo.
`page`*	`number`	`—`	Página atual, a partir de 1 (controlado).
`pageCount`*	`number`	`—`	Total de páginas (mínimo 1).
`align`	`"center" \| "left" \| "right"`	`right`	Onde ficam os botões (`details`) ou o grupo (`group`). Padrão: `right`.
`appearance`	`"card" \| "page"`	`page`	`page`: rodapé da página (borda no topo). `card`: dentro de um card, com padding.
`detailsLabel`	`((page: number, pageCount: number) => string)`	(current, total) => `Página ${current} de ${total}`	Texto de `details`. Padrão: `Página N de M`.
`layout`	`"group" \| "details" \| "numbers"`	`numbers`	`numbers`: anterior, números e próxima. `details`: "Página 1 de 10" e os dois botões. `group`: botões unidos.
`nav`	`"button" \| "link"`	`—`	Estilo de anterior/próxima no layout `numbers`: `link` (padrão em `page`) ou `button` (padrão em `card`).
`nextLabel`	`string`	`Próxima`	Texto do botão "próxima". Padrão: `Próxima`.
`pageLabel`	`((page: number) => string)`	(number) => `Página ${number}`	Nome acessível de cada número. Padrão: `Página N`.
`previousLabel`	`string`	`Anterior`	Texto do botão "anterior". Padrão: `Anterior`.
`shape`	`"circle" \| "square"`	`square`	Forma dos números do layout `numbers`.