Skip to main content

Pane

An individual pane within a pane group.

The Pane component is used to create an individual pane within a PaneGroup.

Props

collapsedSize
type: number
The size of the pane when it is in a collapsed state in percentage of the group's size.
collapsible
type: boolean
Whether the pane can be collapsed.
defaultSize
type: number
The default size of the pane in percentage of the group's size.
maxSize
type: number
The maximum size of the pane in percentage of the group's size.
minSize
type: number
The minimum size of the pane in percentage of the group's size.
order
type: number
The order of the pane in the group. Useful for maintaining order when conditionally rendering panes.
onCollapse
type: () => void
A callback that is called when the pane is collapsed.
onExpand
type: () => void
A callback that is called when the pane is expanded.
onResize
type: (size: number, prevSize: number | undefined) => void
A callback that is called when the pane is resized.
ref
type: HTMLElement | null

The underlying DOM element of the pane group. You can bind to this prop to get a reference to the element.

this
type: typeof Pane

Imperative API for the pane group. bind to this prop to get access to methods for controlling the pane group.

Data Attributes

The following data attributes are available for the Pane component:

		export type PaneAttributes = {
	/** Applied to every pane element. */
	"data-pane": "";
	/** The ID of the pane. */
	"data-pane-id": string;
	/** The ID of the pane's group. */
	"data-pane-group-id": string;
};