New to KendoReact? Start a free 30-day trial

Splitter

Component

Represents the KendoReact Splitter component.

Definition

Package:@progress/kendo-react-layout

Properties Interface:SplitterProps

Syntax:

jsx

const App = () => {
   return (
       <div>
           <Splitter
               style={{height: 400}}
               orientation={'vertical'}
           >
               <div>Pane 1</div>
               <div>Pane 2</div>
               <div>Pane 3</div>
           </Splitter>
       </div>
   );
}

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.

References

ref

SplitterHandle

Represent the ref of the Splitter component.