Table of Contents

Pane

Panes give users a quick way to resize layouts vertically or horizontally by interacting with the splitter. They can also be used to create expandable or collapsible layouts.

Table of Contents

How to use it
Customization
Configuration
API
- PaneProvider
- Pane

Used for this

To make a structured layout resizable, expandable, or collapsible

How to use it

Vertical

Panes can be used in a vertical orientation. The panes resize up to the values that you set.

Horizontal

Panes can be used in a horizontal orientation as well.

Grid

Panes can be resized in both vertical and horizontal directions for a complex grid flexible layout.

Customization

Panes can be collapsed or expanded by using the SplitterButton.

Vertical collapse

Horizontal collapse

Splitter button position

The SplitterButton can be positioned at the start, center or end of the splitter. Its default position is at the start when used in vertical orientation and at the center when used in horizontal orientation.

Configuration

Name9.0.0-next.26•View source•View on npm
Installnpm install @zendeskgarden/react-grid
Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
Importimport { Pane, PaneProvider } from '@zendeskgarden/react-grid'

API

PaneProvider

Prop name	Type	Default	Description
children			Surfaces render props for applying splitter state to the supporting layout Parameters `id` Provides the `id` prop, if specified; otherwise, a generated ID. `getColumnValue` Gets column value by key `getRowValue` Gets row value by key `getGridTemplateRows` Gets grid template rows track `getGridTemplateColumns` Gets grid template columns track
columnValues	Record<string, number>		Defines column values, in `fr` units, for a controlled layout. The values are keyed by splitter.
defaultColumnValues	Record<string, number>		Defines default column values, in `fr` units, for an uncontrolled layout. The values are keyed by splitter.
defaultRowValues	Record<string, number>		Defines default row values, in `fr` units, for an uncontrolled layout. The values are keyed by splitter.
id	string		Identifies the pane provider
onChange			Handles splitter position changes Parameters `rowValues` The updated row values `columnValues` The updated column values
rowValues	Record<string, number>		Defines row values, in `fr` units, for a controlled layout. The values are keyed by splitter.
totalPanesHeight	number	Required	Provides the total height, in `px` units, of all panes in the layout
totalPanesWidth	number	Required	Provides the total width, in `px` units, of all panes in the layout

Pane

Extends HTMLAttributes<HTMLDivElement>

Pane.Content

Extends HTMLAttributes<HTMLDivElement>

Pane.Splitter

Extends HTMLAttributes<HTMLDivElement>

Prop name	Type	Default	Description
isFixed	boolean		Determines if the splitter only toggles between `min` and `max`
layoutKey	string	Required	Specifies the splitter key
max	number	Required	Sets a maximum, in `fr` units, for splitter position
min	number	Required	Sets a minimum, in `fr` units, for splitter position
orientation	'end' \| 'start' \| 'top' \| 'bottom'	'end'	Determines splitter orientation within a pane
providerId	string		Identifies the associated `PaneProvider`. Assumes the closest parent provider, by default.

Pane.SplitterButton

Extends ButtonHTMLAttributes<HTMLButtonElement>

Prop name	Type	Default	Description
label	string	Required	Renders the provided label text inside a tooltip
placement	'end' \| 'start' \| 'center'		Adjusts the placement of the splitter button. Assumes start when vertical and center when horizontal, by default.