UNPKG

2.01 kBTypeScriptView Raw
1import * as React from 'react';
2import { StandardProps } from '@material-ui/core';
3import { UsePaginationItem, UsePaginationProps } from './usePagination';
4
5export interface PaginationRenderItemParams extends UsePaginationItem {
6 color: PaginationProps['color'];
7 shape: PaginationProps['shape'];
8 size: PaginationProps['size'];
9 variant: PaginationProps['variant'];
10}
11
12export interface PaginationProps
13 extends UsePaginationProps,
14 StandardProps<React.HTMLAttributes<HTMLElement>, PaginationClassKey, 'children' | 'onChange'> {
15 /**
16 * The active color.
17 */
18 color?: 'primary' | 'secondary' | 'standard';
19 /**
20 * Accepts a function which returns a string value that provides a user-friendly name for the current page.
21 *
22 * For localization purposes, you can use the provided [translations](/guides/localization/).
23 *
24 * @param {string} type The link or button type to format ('page' | 'first' | 'last' | 'next' | 'previous'). Defaults to 'page'.
25 * @param {number} page The page number to format.
26 * @param {bool} selected If true, the current page is selected.
27 * @returns {string}
28 */
29 getItemAriaLabel?: (
30 type: 'page' | 'first' | 'last' | 'next' | 'previous',
31 page: number,
32 selected: boolean
33 ) => string;
34 /**
35 * Render the item.
36 *
37 * @param {PaginationRenderItemParams} params The props to spread on a PaginationItem.
38 * @returns {ReactNode}
39 */
40 renderItem?: (params: PaginationRenderItemParams) => React.ReactNode;
41 /**
42 * The shape of the pagination items.
43 */
44 shape?: 'round' | 'rounded';
45 /**
46 * The size of the pagination component.
47 */
48 size?: 'small' | 'medium' | 'large';
49 /**
50 * The variant to use.
51 */
52 variant?: 'text' | 'outlined';
53}
54
55export type PaginationClassKey = 'root' | 'ul';
56
57/**
58 *
59 * Demos:
60 *
61 * - [Pagination](https://mui.com/components/pagination/)
62 *
63 * API:
64 *
65 * - [Pagination API](https://mui.com/api/pagination/)
66 */
67export default function Pagination(props: PaginationProps): JSX.Element;