Pular para o conteúdo

Pagination API

Documentação da API para o componente React Pagination . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import Pagination from '@mui/material/Pagination';
// ou
import { Pagination } from '@mui/material';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

The name MuiPagination can be used when providing default props or style overrides in the theme.

Propriedades

Propriedades do componente nativo também estão disponíveis.

NomeTipoPadrãoDescrição
boundaryCountinteger1
Number of always visible pages at the beginning and end.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
color'primary'
| 'secondary'
| 'standard'
| string
'standard'
The active color. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
countinteger1
The total number of pages.
defaultPageinteger1
The page selected by default when the component is uncontrolled.
disabledboolfalse
Se true, o componente está desabilitado.
getItemAriaLabelfunc
Accepts a function which returns a string value that provides a user-friendly name for the current page. This is important for screen reader users.
For localization purposes, you can use the provided translations.

Signature:
function(type: string, page: number, selected: bool) => string
type: The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
page: The page number to format.
selected: If true, the current page is selected.
hideNextButtonboolfalse
If true, hide the next-page button.
hidePrevButtonboolfalse
If true, hide the previous-page button.
onChangefunc
Callback fired when the page is changed.

Signature:
function(event: object, page: number) => void
event: The event source of the callback.
page: The page selected.
pageinteger
The current page.
renderItemfunc(item) => <PaginationItem {...item} />
Render the item.

Signature:
function(params: PaginationRenderItemParams) => ReactNode
params: The props to spread on a PaginationItem.
shape'circular'
| 'rounded'
'circular'
The shape of the pagination items.
showFirstButtonboolfalse
If true, show the first-page button.
showLastButtonboolfalse
If true, show the last-page button.
siblingCountinteger1
Number of always visible pages before and after the current page.
size'small'
| 'medium'
| 'large'
| string
'medium'
The size of the autocomplete.
sxArray<func
| object
| bool>
| func
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
variant'outlined'
| 'text'
| string
'text'
A variante a usar.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regraClasse globalDescrição
root.MuiPagination-rootEstilos aplicados ao elemento raiz.
ul.MuiPagination-ulEstilos aplicados a the ul element.
outlined.MuiPagination-outlinedEstilos aplicados para o elemento raiz se variant="outlined".
text.MuiPagination-textEstilos aplicados para o elemento raiz se variant="text".

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Demonstrações