@mantine/core/lib/components/Pagination/Pagination.d.ts

React components library focused on usability, accessibility and developer experience

import { Factory, MantineSpacing } from '../../core';
import { PaginationIcon } from './Pagination.icons';
import { PaginationControl, type PaginationControlProps } from './PaginationControl/PaginationControl';
import { PaginationDots, type PaginationDotsProps } from './PaginationDots/PaginationDots';
import { PaginationFirst, PaginationLast, PaginationNext, PaginationPrevious, type PaginationEdgeProps } from './PaginationEdges/PaginationEdges';
import { PaginationItems, type PaginationItemsProps } from './PaginationItems/PaginationItems';
import { PaginationFormatLabel, PaginationLabel, type PaginationLabelProps } from './PaginationLabel/PaginationLabel';
import { PaginationRoot, PaginationRootCssVariables, PaginationRootProps, PaginationRootStylesNames } from './PaginationRoot/PaginationRoot';
export type PaginationStylesNames = PaginationRootStylesNames;
export type PaginationCssVariables = PaginationRootCssVariables;
export interface PaginationProps extends PaginationRootProps {
    /** If set, first/last controls are displayed @default false */
    withEdges?: boolean;
    /** If set, next/previous controls are displayed @default true */
    withControls?: boolean;
    /** Props passed down to next/previous/first/last controls */
    getControlProps?: (control: 'first' | 'previous' | 'last' | 'next') => Record<string, any>;
    /** Next control icon component */
    nextIcon?: PaginationIcon;
    /** Previous control icon component */
    previousIcon?: PaginationIcon;
    /** Last control icon component */
    lastIcon?: PaginationIcon;
    /** First control icon component */
    firstIcon?: PaginationIcon;
    /** Dots icon component */
    dotsIcon?: PaginationIcon;
    /** Key of `theme.spacing`, gap between controls @default 8 */
    gap?: MantineSpacing;
    /** If set, the pagination is hidden when only one page is available (`total={1}`) @default false */
    hideWithOnePage?: boolean;
    /** If set to `false`, page number buttons are hidden, only next/previous controls remain @default `true` */
    withPages?: boolean;
    /** Function to format the label text displayed in responsive mode */
    formatLabel?: PaginationFormatLabel;
}
export type PaginationFactory = Factory<{
    props: PaginationProps;
    ref: HTMLDivElement;
    stylesNames: PaginationStylesNames;
    vars: PaginationCssVariables;
    staticComponents: {
        Root: typeof PaginationRoot;
        Control: typeof PaginationControl;
        Dots: typeof PaginationDots;
        First: typeof PaginationFirst;
        Last: typeof PaginationLast;
        Next: typeof PaginationNext;
        Previous: typeof PaginationPrevious;
        Items: typeof PaginationItems;
        Label: typeof PaginationLabel;
    };
}>;
export declare const Pagination: import("../..").MantineComponent<{
    props: PaginationProps;
    ref: HTMLDivElement;
    stylesNames: PaginationStylesNames;
    vars: PaginationCssVariables;
    staticComponents: {
        Root: typeof PaginationRoot;
        Control: typeof PaginationControl;
        Dots: typeof PaginationDots;
        First: typeof PaginationFirst;
        Last: typeof PaginationLast;
        Next: typeof PaginationNext;
        Previous: typeof PaginationPrevious;
        Items: typeof PaginationItems;
        Label: typeof PaginationLabel;
    };
}>;
export declare namespace Pagination {
    type Props = PaginationProps;
    type StylesNames = PaginationStylesNames;
    type CssVariables = PaginationCssVariables;
    type Factory = PaginationFactory;
    namespace Root {
        type Props = PaginationRootProps;
    }
    namespace Control {
        type Props = PaginationControlProps;
    }
    namespace Dots {
        type Props = PaginationDotsProps;
    }
    namespace Edge {
        type Props = PaginationEdgeProps;
    }
    namespace Items {
        type Props = PaginationItemsProps;
    }
    namespace Label {
        type Props = PaginationLabelProps;
    }
}