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

React components library focused on usability, accessibility and developer experience

import { Ref } from 'react';
import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
export type ScrollerStylesNames = 'root' | 'container' | 'content' | 'control' | 'chevron';
export type ScrollerCssVariables = {
    root: '--scroller-control-size' | '--scroller-background-color';
};
export interface ScrollerProps extends BoxProps, StylesApiProps<ScrollerFactory>, ElementProps<'div'> {
    /** Content to display */
    children: React.ReactNode;
    /** Amount of pixels to scroll when clicking the control buttons, `200` by default */
    scrollAmount?: number;
    /** Size of the control buttons, @default 60px */
    controlSize?: string | number;
    /** Background color for the gradient fade on controls, `'var(--mantine-color-body)'` by default */
    edgeGradientColor?: string;
    /** Props passed to the start control button */
    startControlProps?: React.ComponentProps<'button'>;
    /** Props passed to the end control button */
    endControlProps?: React.ComponentProps<'button'>;
    /** Icon component for the start control, AccordionChevron by default */
    startControlIcon?: React.ReactNode;
    /** Icon component for the end control, AccordionChevron by default */
    endControlIcon?: React.ReactNode;
    /** Determines whether start control should always be visible regardless of scroll position, `false` by default */
    showStartControl?: boolean;
    /** Determines whether end control should always be visible regardless of scroll position, `false` by default */
    showEndControl?: boolean;
    /** Determines whether content can be scrolled by dragging with mouse, `true` by default */
    draggable?: boolean;
    /** Ref for the scroll container element */
    ref?: Ref<HTMLDivElement>;
}
export type ScrollerFactory = Factory<{
    props: ScrollerProps;
    ref: HTMLDivElement;
    stylesNames: ScrollerStylesNames;
    vars: ScrollerCssVariables;
}>;
export declare const Scroller: import("../..").MantineComponent<{
    props: ScrollerProps;
    ref: HTMLDivElement;
    stylesNames: ScrollerStylesNames;
    vars: ScrollerCssVariables;
}>;