Interface SheetProps

interface SheetProps {
    AppBarProps?: AppBarProps;
    ariaLabel: string;
    autoFocus?: boolean;
    children?: ReactNode;
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    customAttributes?: CustomAttribute[];
    disableAppBarMargin?: boolean;
    disableEnforceFocus?: boolean;
    disableEscapeKeyDown?: boolean;
    disableFocusHeading?: boolean;
    enteringDirection?: EnteringDirectionType;
    height: "auto" | "cover";
    hideBackdrop?: boolean;
    id?: string;
    onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void);
    open: boolean;
    PaperProps?: Partial<PaperProps<ElementType<any, keyof IntrinsicElements>>>;
    role?: AriaRole;
    shouldCloseOnBackdropClick?: boolean;
    sx?: SxProps<Theme>;
    tabIndex?: number;
    title?: string;
    TransitionProps?: TransitionProps;
    width: "medium" | "large";
}

Hierarchy

Properties

AppBarProps? ariaLabel autoFocus? children? customAttribute? customAttributes? disableAppBarMargin? disableEnforceFocus? disableEscapeKeyDown? disableFocusHeading? enteringDirection? height hideBackdrop? id? onClose? open PaperProps? role? shouldCloseOnBackdropClick? sx? tabIndex? title? TransitionProps? width

Properties

OptionalAppBarProps

AppBarProps?: AppBarProps

Configuration options for the dialog's app bar component.

ariaLabel

ariaLabel: string

Accessible label for screen readers describing the dialog's purpose. Required for WCAG 2.1 compliance.

OptionalautoFocus

autoFocus?: boolean

Optionalchildren

children?: ReactNode

Dialog children, usually the included sub-components.

OptionalcustomAttribute

customAttribute?: {
    attribute: string;
    value: string | number;
}

Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

OptionalcustomAttributes

customAttributes?: CustomAttribute[]

Array of custom attributes that can be used for testing purposes.

OptionaldisableAppBarMargin

disableAppBarMargin?: boolean

Remove default spacing inside the Sheet caused by the AppBar. Useful for Sheet with hero image.

OptionaldisableEnforceFocus

disableEnforceFocus?: boolean

If true, the modal will not prevent focus from leaving the modal while open.

Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.

Default

false

OptionaldisableEscapeKeyDown

disableEscapeKeyDown?: boolean

If true, hitting escape will not fire the onClose callback.

Default

false

OptionaldisableFocusHeading

disableFocusHeading?: boolean

If true, the Sheet will not automatically focus the first heading

OptionalenteringDirection

enteringDirection?: EnteringDirectionType

Specifies the direction from which the dialog enters the screen.

height

height: "auto" | "cover"

Height "Auto" adjust sheet to fit content with a max height of 800px. "Cover" makes sheet cover screen, regardless of content.

OptionalhideBackdrop

hideBackdrop?: boolean

If true, the backdrop is not rendered.

Default

false

Optionalid

id?: string

OptionalonClose

onClose?: ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void)

Callback fired when the component requests to be closed.

Type declaration

    • (event, reason): void

    • Parameters

      • event: {}

        The event source of the callback.

        • reason: "backdropClick" | "escapeKeyDown"

          Can be: "escapeKeyDown", "backdropClick".

        Returns void

    open

    open: boolean

    If true, the component is shown.

    OptionalPaperProps

    PaperProps?: Partial<PaperProps<ElementType<any, keyof IntrinsicElements>>>

    Props applied to the Paper element.

    Default

    {}

    Optionalrole

    role?: AriaRole

    OptionalshouldCloseOnBackdropClick

    shouldCloseOnBackdropClick?: boolean

    When true, clicking the backdrop (area outside the dialog) will close it.

    Optionalsx

    sx?: SxProps<Theme>

    The system prop that allows defining system overrides as well as additional CSS styles.

    OptionaltabIndex

    tabIndex?: number

    Optionaltitle

    title?: string

    OptionalTransitionProps

    TransitionProps?: TransitionProps

    Props applied to the transition element. By default, the element is based on this Transition component.

    width

    width: "medium" | "large"

    Sheet width is 664px for "medium" and 1104px for "large".

    Settings

    Member Visibility

    On This Page

    Properties