Keyboard Navigation

By default, the keyboard navigation of the TabStrip is enabled.

The TabStrip supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Up Arrow & Left ArrowSelects the previous tab. If no previous tab is available, selects the last tab.
Down Arrow & Right ArrowSelects the next tab. If no next tab is available, selects the first tab.
HomeSelects the first tab.
EndSelects the last tab.
<style>
    .weather {
        margin: 30px;
        text-align: center;
    }
</style>
class App extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            selected: 0
        }
    }
    handleSelect = (e) => {
        this.setState({selected: e.selected});
    }
    render() {
        return (
            <TabStrip selected={this.state.selected} onSelect={this.handleSelect}>
                <TabStripTab title="Paris">
                    <div class="weather">
                        <h4>17<span>&ordm;C</span></h4>
                        <p>Rainy weather in Paris.</p>
                    </div>
                </TabStripTab>
                <TabStripTab title="New York">
                    <div class="weather">
                        <h4>29<span>&ordm;C</span></h4>
                        <p>Sunny weather in New York.</p>
                    </div>
                </TabStripTab>
                <TabStripTab title="London">
                    <div class="weather">
                        <h4>21<span>&ordm;C</span></h4>
                        <p>Sunny weather in London.</p>
                    </div>
                </TabStripTab>
                <TabStripTab title="Moscow">
                    <div class="weather">
                        <h4>16<span>&ordm;C</span></h4>
                        <p>Cloudy weather in Moscow.</p>
                    </div>
                </TabStripTab>
            </TabStrip>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)
 /