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

React components library focused on usability, accessibility and developer experience

import { BoxProps, ElementProps, Factory, StylesApiProps } from '../../core';
export type SpoilerStylesNames = 'root' | 'control' | 'content';
export type SpoilerCssVariables = {
    root: '--spoiler-transition-duration';
};
export interface SpoilerProps extends BoxProps, StylesApiProps<SpoilerFactory>, ElementProps<'div'> {
    /** Maximum height of visible content in px. When content exceeds this height, the toggle control appears @default 100 */
    maxHeight?: number;
    /** Content displayed in the toggle button when content is collapsed (to expand) */
    showLabel: React.ReactNode;
    /** Content displayed in the toggle button when content is expanded (to collapse) */
    hideLabel: React.ReactNode;
    /** Ref of the toggle button element */
    controlRef?: React.Ref<HTMLButtonElement>;
    /** Initial expanded state in uncontrolled mode. If `true`, content starts expanded. If `false`, content starts collapsed @default false */
    defaultExpanded?: boolean;
    /** Controlled expanded state value */
    expanded?: boolean;
    /** Called when expanded state changes (when spoiler visibility is toggled by the user) */
    onExpandedChange?: (expanded: boolean) => void;
    /** Spoiler reveal transition duration in ms. Set to 0 to disable animation @default 200 */
    transitionDuration?: number;
    /** Accessible label for the toggle button when collapsed. If not set, `showLabel` is used */
    showAriaLabel?: string;
    /** Accessible label for the toggle button when expanded. If not set, `hideLabel` is used */
    hideAriaLabel?: string;
}
export type SpoilerFactory = Factory<{
    props: SpoilerProps;
    ref: HTMLDivElement;
    stylesNames: SpoilerStylesNames;
    vars: SpoilerCssVariables;
}>;
export declare const Spoiler: import("../..").MantineComponent<{
    props: SpoilerProps;
    ref: HTMLDivElement;
    stylesNames: SpoilerStylesNames;
    vars: SpoilerCssVariables;
}>;