Keyboard Navigation

The keyboard navigation of the Splitter is always available.

The Splitter supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Up ArrowMoves up the split-bar in a vertical Splitter.
Down ArrowMoves down a split-bar in a vertical Splitter.
Left ArrowMoves left a split-bar in a horizontal Splitter.
Right ArrowMoves right a split-bar in a horizontal Splitter.
EnterToggles the collapsed state of the nearest collapsible pane.
<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: [
                { min: '20px' },
                { min: '20px' },
            ],
            horizontalPanes: [
                { min: '20px', size: '20%',  collapsible: true },
                { min: '20px' },
            ]
        };
    }

    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>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

 /