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';Nome do componente
The nameMuiPagination can be used when providing default props or style overrides in the theme.Propriedades
Props of the nativo component are also available.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| boundaryCount | integer | 1 | Number of always visible pages at the beginning and end. |
| 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. |
| count | integer | 1 | The total number of pages. |
| defaultPage | integer | 1 | The page selected by default when the component is uncontrolled. |
| disabled | bool | false | Se true, o componente está desabilitado. |
| getItemAriaLabel | func | 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) => stringtype: 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. | |
| hideNextButton | bool | false | If true, hide the next-page button. |
| hidePrevButton | bool | false | If true, hide the previous-page button. |
| onChange | func | Callback fired when the page is changed. Signature: function(event: object, page: number) => voidevent: The event source of the callback. page: The page selected. | |
| page | integer | The current page. | |
| renderItem | func | (item) => <PaginationItem {...item} /> | Render the item. Signature: function(params: PaginationRenderItemParams) => ReactNodeparams: The props to spread on a PaginationItem. |
| shape | 'circular' | 'rounded' | 'circular' | The shape of the pagination items. |
| showFirstButton | bool | false | If true, show the first-page button. |
| showLastButton | bool | false | If true, show the last-page button. |
| siblingCount | integer | 1 | Number of always visible pages before and after the current page. |
| size | 'small' | 'medium' | 'large' | string | 'medium' | The size of the autocomplete. |
| sx | 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 regra | Classe global | Descrição |
|---|---|---|
| root | .MuiPagination-root | Estilos aplicados ao elemento raiz. |
| ul | .MuiPagination-ul | Estilos aplicados a the ul element. |
| outlined | .MuiPagination-outlined | Estilos aplicados para o elemento raiz se variant="outlined". |
| text | .MuiPagination-text | Estilos aplicados para o elemento raiz se variant="text". |
Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.