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

React components library focused on usability, accessibility and developer experience

import { SplitterPaneSize, SplitterStep, UseSplitterRedistributeFn, UseSplitterReturnValue } from '@mantine/hooks';
import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
import { SplitterPane, SplitterPaneStylesNames } from './SplitterPane/SplitterPane';
export type SplitterStylesNames = 'root' | 'handle' | 'thumb' | SplitterPaneStylesNames;
export type SplitterCssVariables = {
    root: '--splitter-line-size' | '--splitter-handle-color';
};
export interface SplitterProps extends BoxProps, StylesApiProps<SplitterFactory>, ElementProps<'div'> {
    /** Layout direction @default 'horizontal' */
    orientation?: 'horizontal' | 'vertical';
    /** Controlled sizes, each value keeps the unit it was declared in (number/`%` flexible, `px`/`rem` fixed) */
    sizes?: SplitterPaneSize[];
    /** Called during resize with updated sizes, each value keeps its declared unit */
    onSizeChange?: (sizes: SplitterPaneSize[]) => void;
    /** Called when drag starts */
    onResizeStart?: (handleIndex: number) => void;
    /** Called when drag ends */
    onResizeEnd?: (handleIndex: number, sizes: SplitterPaneSize[]) => void;
    /** Called when a panel collapses or expands */
    onCollapseChange?: (panelIndex: number, collapsed: boolean) => void;
    /** How to redistribute space when immediate neighbor is at its min/max */
    redistribute?: 'nearest' | 'equal' | UseSplitterRedistributeFn;
    /** Keyboard step size, a `number`/`%` is a percentage, `px`/`rem` is resolved to pixels @default 1 */
    step?: SplitterStep;
    /** Shift+arrow step size, a `number`/`%` is a percentage, `px`/`rem` is resolved to pixels @default 10 */
    shiftStep?: SplitterStep;
    /** CSS value for separator line thickness between panes @default 2 */
    lineSize?: number | string;
    /** Key of `theme.colors` or any valid CSS color for the separator line */
    handleColor?: MantineColor;
    /** Custom icon displayed in the handle thumb, by default uses grip icon based on orientation */
    handleIcon?: React.ReactNode;
    /** Determines whether the thumb with grip icon is displayed on the handle @default true */
    withHandle?: boolean;
    /** Restore the two panes adjacent to a handle to their default ratio (preserving their combined size) when the handle is double-clicked @default true */
    resetOnDoubleClick?: boolean;
    /** Ref to imperative splitter API (sizes, collapse, expand, etc.) */
    splitterRef?: React.RefObject<UseSplitterReturnValue | null>;
    /** Splitter panes */
    children?: React.ReactNode;
}
export type SplitterFactory = Factory<{
    props: SplitterProps;
    ref: HTMLDivElement;
    stylesNames: SplitterStylesNames;
    vars: SplitterCssVariables;
    staticComponents: {
        Pane: typeof SplitterPane;
    };
}>;
export declare const Splitter: import("../..").MantineComponent<{
    props: SplitterProps;
    ref: HTMLDivElement;
    stylesNames: SplitterStylesNames;
    vars: SplitterCssVariables;
    staticComponents: {
        Pane: typeof SplitterPane;
    };
}>;