Orientation

The Splitter enables you to arrange its panes either horizontally or vertically.

To set the pane orientation, use the orientation property.

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

        this.state = {
            verticalPanes: [
                { },
                { },
            ],
            horizontalPanes: [
                {size: '20%',  collapsible: true},
                {},
                {size: '20%', collapsible: true}
            ]
        };
    }

    onHorizontalLayoutChange = (updatedState) => {
        this.setState({
            horizontalPanes: updatedState
        });
    }

    onVerticalLayoutChange = (updatedState) => {
        this.setState({
            verticalPanes: updatedState
        });
    }

    render() {
        return (
            <div>
                <Splitter
                    style={{height: 200}}
                    panes={this.state.horizontalPanes}
                    onLayoutChange={this.onHorizontalLayoutChange}
                >
                    <h3>Left pane</h3>
                    <h3>Middle pane</h3>
                    <h3>Right pane</h3>
                </Splitter>

                <Splitter
                    style={{height: 200}}
                    panes={this.state.verticalPanes}
                    orientation={'vertical'}
                    onLayoutChange={this.onVerticalLayoutChange}
                >
                    <h3>Top pane</h3>
                    <h3>Bottom pane</h3>
                </Splitter>
            </div>
        );
    }
}
ReactDOM.render(
    <App/>,
    document.querySelector('my-app')
);

In this article