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

PaginationItem API

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

Importação

import PaginationItem from '@mui/material/PaginationItem';
// ou
import { PaginationItem } 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 MuiPaginationItem 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
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.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
components{ first?: elementType, last?: elementType, next?: elementType, previous?: elementType }{ first: FirstPageIcon, last: LastPageIcon, next: NavigateNextIcon, previous: NavigateBeforeIcon, }
The components used for first, last, next & previous item type
disabledboolfalse
Se true, o componente está desabilitado.
pagenode
The current page number.
selectedboolfalse
If true the pagination item is selected.
shape'circular'
| 'rounded'		'circular'
The shape of the pagination item.
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.
type'end-ellipsis'
| 'first'
| 'last'
| 'next'
| 'page'
| 'previous'
| 'start-ellipsis'		'page'
The type of pagination item.
variant'outlined'
| 'text'
| string		'text'
A variante a usar.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regraClasse globalDescrição
root.MuiPaginationItem-rootEstilos aplicados ao elemento raiz.
page.MuiPaginationItem-pageEstilos aplicados para o elemento raiz se type="page".
sizeSmall.MuiPaginationItem-sizeSmallEstilos aplicados para o elemento raiz se size="small".
sizeLarge.MuiPaginationItem-sizeLargeEstilos aplicados para o elemento raiz se size="large".
text.MuiPaginationItem-textEstilos aplicados para o elemento raiz se variant="text".
textPrimary.MuiPaginationItem-textPrimaryEstilos aplicados para o elemento raiz se variant="text" and color="primary".
textSecondary.MuiPaginationItem-textSecondaryEstilos aplicados para o elemento raiz se variant="text" and color="secondary".
outlined.MuiPaginationItem-outlinedEstilos aplicados para o elemento raiz se variant="outlined".
outlinedPrimary.MuiPaginationItem-outlinedPrimaryEstilos aplicados para o elemento raiz se variant="outlined" and color="primary".
outlinedSecondary.MuiPaginationItem-outlinedSecondaryEstilos aplicados para o elemento raiz se variant="outlined" and color="secondary".
rounded.MuiPaginationItem-roundedEstilos aplicados para o elemento raiz se rounded="true".
ellipsis.MuiPaginationItem-ellipsisEstilos aplicados para o elemento raiz se type="start-ellipsis" or type="end-ellipsis".
firstLast.MuiPaginationItem-firstLastStyles applyed to the root element if `type="first"` or type="last".
previousNext.MuiPaginationItem-previousNextStyles applyed to the root element if `type="previous"` or type="next".
focusVisible.Mui-focusVisiblePseudo-class aplicada a o elemento raiz se teclado focado.
disabled.Mui-disabledPseudo-class aplicada a o elemento raiz se disabled={true}.
selected.Mui-selectedPseudo-class aplicada a o elemento raiz se selected={true}.
icon.MuiPaginationItem-iconEstilos aplicados a the icon element.

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

Demonstrações