Getting Started with KendoReact Splitter

The KendoReact Splitter splits the page into sections and allows the user to control the page layout.

The KendoReact Splitter component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-layout package.

Basic Usage

The following example demonstrates the Splitter in action.

<style>
.pane-content { padding: 0 10px; }
h3 { font-size: 1.2em; margin: 10px 0; padding: 0; }
p { margin: 0; padding: 0; }
</style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            panes: [
                { size: '20%', min: '20px', collapsible: true },
                {},
                { size: '30%', min: '20px', collapsible: true }
            ],
            nestedPanes: [
                { size: '40%' },
                { },
                { size: '30%', resizable: false }
            ]
        };
    }

    onLayoutChange = (updatedState) => {
        this.setState({
            panes: updatedState
        });
    }

    onNestedLayoutChange = (updatedState) => {
        this.setState({
            nestedPanes: updatedState
        });
    }

    render() {
        return (
            <div>
                <Splitter
                    style={{height: 650}}
                    panes={this.state.nestedPanes}
                    orientation={'vertical'}
                    onLayoutChange={this.onNestedLayoutChange}
                >
                    <Splitter
                        panes={this.state.panes}
                        onLayoutChange={this.onLayoutChange}
                    >
                        <div class="pane-content">
                            <h3>Inner splitter / left pane</h3>
                            <p>Resizable and collapsible.</p>
                        </div>
                        <div class="pane-content">
                            <h3>Inner splitter / center pane</h3>
                            <p>Resizable only.</p>
                        </div>
                        <div class="pane-content">
                            <h3>Inner splitter / right pane</h3>
                            <p>Resizable and collapsible.</p>
                        </div>
                    </Splitter>

                     <div class="pane-content">
                        <h3>Outer splitter / Middle pane</h3>
                        <p>Resizable only.</p>
                    </div>
                    <div class="pane-content">
                        <h3>Outer splitter / Bottom pane</h3>
                        <p>Non-resizable and non-collapsible.</p>
                    </div>
                </Splitter>
            </div>
        );
    }
}
ReactDOM.render(
    <App/>,
    document.querySelector('my-app')
);

Functionality and Features

 /