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.

API Reference

Props

collapsedSize
type: number
The size of the pane when it is in a collapsed state.
collapsible
type: boolean
Whether the pane can be collapsed.
default: false
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.
default: 100
minSize
type: number
The minimum size of the pane in percentage of the group's size.
default: 0
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. You can bind to this prop to get a reference to the element.

this
type: Pane
Retrieve a reference to the component to access methods for controlling the pane via its imperative API.

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;
};