CollapsiblePanel#

CollapsiblePanel()#

function CollapsiblePanel(props): Element;

A panel docked to the top or bottom edge of its container.

Now a naming shim over CollapsibleEdge, which is the same component with the axis as a parameter. Kept so the existing call sites (and their height/minHeight prop names) keep working; new code should reach for CollapsibleEdge directly.

Parameters#

Parameter	Type
`props`	`CollapsiblePanelProps`

Returns#

Element

CollapsiblePanelProps#

Properties#

anchor?#

optional anchor?: "top" | "bottom";

Which edge of the container the panel appears on

children#

children: ReactNode;

Content to render inside the panel

handleIcon?#

optional handleIcon?: ReactNode;

Custom icon for the toggle handle (replaces default chevron)

handlePosition?#

optional handlePosition?: string;

Position of the toggle handle (CSS value, e.g., "50%", "100px", "calc(50% - 20px)")

headerContent?#

optional headerContent?: ReactNode;

Custom header content (replaces default title)

height?#

optional height?: number;

Height of the panel when open (initial height if resizable)

hideHeader?#

optional hideHeader?: boolean;

Hide the header entirely

indicatorColor?#

optional indicatorColor?: string;

Color of the indicator

maxHeight?#

optional maxHeight?: number;

Maximum height when resizable

minHeight?#

optional minHeight?: number;

Minimum height when resizable

onResize?#

optional onResize?: (height) => void;

Callback when height changes (only when resizable)

Parameters#

Parameter	Type
`height`	`number`

Returns#

void

onToggle#

onToggle: (open) => void;

Callback when the panel should be toggled

Parameters#

Parameter	Type
`open`	`boolean`

Returns#

void

open#

open: boolean;

Whether the panel is open

resizable?#

optional resizable?: boolean;

Enable resizing

showIndicator?#

optional showIndicator?: boolean;

Show a pulsing indicator on the toggle button

sx?#

optional sx?: any;

Additional sx props for the container

title?#

optional title?: string;

Title shown in the panel header

toggleLabel?#

optional toggleLabel?: string;

Accessible name for the toggle button.

toggleTooltip?#

optional toggleTooltip?: string;

Tooltip for the toggle button when closed

default#

Renames and re-exports CollapsiblePanel