Pular para o conteúdo
Ajude a traduzir esta página

Paginação

O componente de paginação permite ao usuário selecionar uma página específica a partir de um intervalo de páginas.

Paginação básica

<Pagination count={10} />
<Pagination count={10} color="primary" />
<Pagination count={10} color="secondary" />
<Pagination count={10} disabled />

Paginação delineada

<Pagination count={10} variant="outlined" />
<Pagination count={10} variant="outlined" color="primary" />
<Pagination count={10} variant="outlined" color="secondary" />
<Pagination count={10} variant="outlined" disabled />

Paginação arredondada

<Pagination count={10} shape="rounded" />
<Pagination count={10} variant="outlined" shape="rounded" />

Tamanho da paginação

<Pagination count={10} size="small" />
<Pagination count={10} />
<Pagination count={10} size="large" />

Botões

Você pode habilitar opcionalmente os botões de primeira página e de última página, ou desabilitar botões de página anterior e de próxima página.

<Pagination count={10} showFirstButton showLastButton />
<Pagination count={10} hidePrevButton hideNextButton />

Intervalos de paginação

Você pode especificar quantos dígitos exibir a qualquer lado da página atual com a propriedade siblingRange, e adjacente ao número da página inicial e final com a propriedade boundaryRange.

<Pagination
  count={10}
  renderItem={(item) => (
    <PaginationItem
      components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
      {...item}
    />
  )}
/>

Intervalos de paginação

Você pode especificar quantos dígitos exibir a qualquer lado da página atual com a propriedade siblingRange, e adjacente ao número da página inicial e final com a propriedade boundaryRange.

<Pagination count={11} defaultPage={6} siblingCount={0} />
<Pagination count={11} defaultPage={6} /> {/* Default ranges */}
<Pagination count={11} defaultPage={6} siblingCount={0} boundaryCount={2} />
<Pagination count={11} defaultPage={6} boundaryCount={2} />

Paginação controlada

Page: 1

<Typography>Page: {page}</Typography>
<Pagination count={10} page={page} onChange={handleChange} />

Integração com router

<MemoryRouter initialEntries={['/inbox']} initialIndex={0}>
  <Routes>
    <Route path="*" element={<Content />} />
  </Routes>
</MemoryRouter>

usePagination

For advanced customization use cases, a headless usePagination() hook is exposed. It accepts almost the same options as the Pagination component minus all the props related to the rendering of JSX. The Pagination component is built on this hook.

import { usePagination } from '@material-ui/core/Pagination';

Paginação em tabelas

O componente Pagination foi projetado para paginar uma lista de itens arbitrários quando a carga infinita não é usada. É preferível em contextos onde o SEO é importante, por exemplo, um blog.

Para a paginação de um conjunto grande de dados tabulares, você deve usar o componente TablePagination.

Rows per page:

21–30 of 100

<TablePagination
  component="div"
  count={100}
  page={page}
  onPageChange={handleChangePage}
  rowsPerPage={rowsPerPage}
  onRowsPerPageChange={handleChangeRowsPerPage}
/>

⚠️ Observe que a propriedade Pagination da página começa em 1 para corresponder ao requisito de incluir o valor na URL, enquanto a propriedade TablePagination da página começa em 0 para corresponder ao requisito de zero-based array do JavaScript arrays, que tem com renderização muitos dados tabulares.

Você pode aprender mais sobre este caso de uso na seção de tabela da documentação.

Accessibility

ARIA

O nó raiz tem uma role de "navigation" e o rótulo aria-label "pagination navigation" por padrão. Os itens da página têm um rótulo aria-label que identifica a finalidade do item ("go to first page", "go to previous page", "go to page 1" etc.). Você pode substituir estes padrões usando a propriedade getItemAriaLabel.

Teclado

Os itens de paginação estão em ordem de tabulação, com um índice de tabulação iniciando em "0".

API