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.

Nome	Tipo	Padrão	Descrição
classes	object		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.
component	elementType		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
disabled	bool	false	Se `true`, o componente está desabilitado.
page	node		The current page number.
selected	bool	false	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.
sx	Array<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 regra	Classe global	Descrição
root	.MuiPaginationItem-root	Estilos aplicados ao elemento raiz.
page	.MuiPaginationItem-page	Estilos aplicados para o elemento raiz se `type="page"`.
sizeSmall	.MuiPaginationItem-sizeSmall	Estilos aplicados para o elemento raiz se `size="small"`.
sizeLarge	.MuiPaginationItem-sizeLarge	Estilos aplicados para o elemento raiz se `size="large"`.
text	.MuiPaginationItem-text	Estilos aplicados para o elemento raiz se `variant="text"`.
textPrimary	.MuiPaginationItem-textPrimary	Estilos aplicados para o elemento raiz se `variant="text"` and `color="primary"`.
textSecondary	.MuiPaginationItem-textSecondary	Estilos aplicados para o elemento raiz se `variant="text"` and `color="secondary"`.
outlined	.MuiPaginationItem-outlined	Estilos aplicados para o elemento raiz se `variant="outlined"`.
outlinedPrimary	.MuiPaginationItem-outlinedPrimary	Estilos aplicados para o elemento raiz se `variant="outlined"` and `color="primary"`.
outlinedSecondary	.MuiPaginationItem-outlinedSecondary	Estilos aplicados para o elemento raiz se `variant="outlined"` and `color="secondary"`.
rounded	.MuiPaginationItem-rounded	Estilos aplicados para o elemento raiz se `rounded="true"`.
ellipsis	.MuiPaginationItem-ellipsis	Estilos aplicados para o elemento raiz se `type="start-ellipsis"` or `type="end-ellipsis"`.
firstLast	.MuiPaginationItem-firstLast	Styles applyed to the root element if `type="first"` or type="last".
previousNext	.MuiPaginationItem-previousNext	Styles applyed to the root element if `type="previous"` or type="next".
focusVisible	.Mui-focusVisible	Pseudo-class aplicada a o elemento raiz se teclado focado.
disabled	.Mui-disabled	Pseudo-class aplicada a o elemento raiz se `disabled={true}`.
selected	.Mui-selected	Pseudo-class aplicada a o elemento raiz se `selected={true}`.
icon	.MuiPaginationItem-icon	Estilos aplicados a the icon element.

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

Com um nome de classe global.
Com um nome de regra como parte da propriedade styleOverrides do componente em um tema personalizado.

Demonstrações

Pagination