90 lines
3.1 KiB
TypeScript
90 lines
3.1 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import { OverridableStringUnion } from '@mui/types';
|
||
|
|
import { SxProps } from '@mui/system';
|
||
|
|
import { InternalStandardProps as StandardProps } from '@mui/material';
|
||
|
|
import { Theme } from '../styles';
|
||
|
|
import { UsePaginationItem, UsePaginationProps } from '../usePagination/usePagination';
|
||
|
|
import { PaginationClasses } from './paginationClasses';
|
||
|
|
|
||
|
|
export interface PaginationRenderItemParams extends UsePaginationItem {
|
||
|
|
color: PaginationProps['color'];
|
||
|
|
shape: PaginationProps['shape'];
|
||
|
|
size: PaginationProps['size'];
|
||
|
|
variant: PaginationProps['variant'];
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface PaginationPropsVariantOverrides {}
|
||
|
|
|
||
|
|
export interface PaginationPropsSizeOverrides {}
|
||
|
|
|
||
|
|
export interface PaginationPropsColorOverrides {}
|
||
|
|
|
||
|
|
export interface PaginationProps
|
||
|
|
extends UsePaginationProps,
|
||
|
|
StandardProps<React.HTMLAttributes<HTMLElement>, 'children' | 'onChange'> {
|
||
|
|
/**
|
||
|
|
* Override or extend the styles applied to the component.
|
||
|
|
*/
|
||
|
|
classes?: Partial<PaginationClasses>;
|
||
|
|
/**
|
||
|
|
* The active color.
|
||
|
|
* It supports both default and custom theme colors, which can be added as shown in the
|
||
|
|
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
|
||
|
|
* @default 'standard'
|
||
|
|
*/
|
||
|
|
color?: OverridableStringUnion<
|
||
|
|
'primary' | 'secondary' | 'standard',
|
||
|
|
PaginationPropsColorOverrides
|
||
|
|
>;
|
||
|
|
/**
|
||
|
|
* 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](/material-ui/guides/localization/).
|
||
|
|
* @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous' | 'start-ellipsis' | 'end-ellipsis'). Defaults to 'page'.
|
||
|
|
* @param {number} page The page number to format.
|
||
|
|
* @param {bool} selected If true, the current page is selected.
|
||
|
|
* @returns {string}
|
||
|
|
*/
|
||
|
|
getItemAriaLabel?: (type: UsePaginationItem['type'], page: number, selected: boolean) => string;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Render the item.
|
||
|
|
* @param {PaginationRenderItemParams} params The props to spread on a PaginationItem.
|
||
|
|
* @returns {ReactNode}
|
||
|
|
* @default (item) => <PaginationItem {...item} />
|
||
|
|
*/
|
||
|
|
renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;
|
||
|
|
/**
|
||
|
|
* The shape of the pagination items.
|
||
|
|
* @default 'circular'
|
||
|
|
*/
|
||
|
|
shape?: 'circular' | 'rounded';
|
||
|
|
/**
|
||
|
|
* The size of the component.
|
||
|
|
* @default 'medium'
|
||
|
|
*/
|
||
|
|
size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationPropsSizeOverrides>;
|
||
|
|
/**
|
||
|
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
||
|
|
*/
|
||
|
|
sx?: SxProps<Theme>;
|
||
|
|
/**
|
||
|
|
* The variant to use.
|
||
|
|
* @default 'text'
|
||
|
|
*/
|
||
|
|
variant?: OverridableStringUnion<'text' | 'outlined', PaginationPropsVariantOverrides>;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
*
|
||
|
|
* Demos:
|
||
|
|
*
|
||
|
|
* - [Pagination](https://mui.com/material-ui/react-pagination/)
|
||
|
|
*
|
||
|
|
* API:
|
||
|
|
*
|
||
|
|
* - [Pagination API](https://mui.com/material-ui/api/pagination/)
|
||
|
|
*/
|
||
|
|
export default function Pagination(props: PaginationProps): JSX.Element;
|