New to KendoReact? Start a free 30-day trial

SplitterProps

Interface

Represents the options of the Splitter.

Definition

Package:@progress/kendo-react-layout

Properties

children?

ReactNode

Determines the children nodes.

className?

string

Sets additional classes to the component.

defaultPanes?

SplitterPaneProps[]

Sets the initial options of the Splitter panes (more information and examples). Can be used for uncontrolled state.

Example:

jsx

<Splitter defaultPanes={[{ size: '30%' }, { size: '70%' }]} />

id?

string

Sets the id property of the top div element of the component.

onChange?

(event: SplitterOnChangeEvent) => void

Fires after a Splitter pane is resized or collapsed. Useful for updating the pane options and triggering layout calculations on components which are positioned inside the panes.

Parameters:eventSplitterOnChangeEvent

Example:

jsx

<Splitter onChange={(event) => console.log(event.newState)} />

orientation?

"vertical" | "horizontal"

Specifies the orientation of the panes within the Splitter (more information and examples). Panes in a horizontal Splitter are placed horizontally. Panes in a vertical Splitter are placed vertically.

Default:

'horizontal'

Example:

jsx

<Splitter orientation="vertical" />

panes?

SplitterPaneProps[]

Sets the options of the Splitter panes (more information and examples). Can be used for controlled state.

Example:

jsx

<Splitter panes={[{ size: '50%' }, { size: '50%' }]} />

style?

CSSProperties

Sets additional CSS styles to the component.