Tabs

You can instantiate the TabStrip tabs by initializing them as TabStripTab components and use their corresponding properties.

The TabStrip provides configuration options for:

Titles

You can handle the title of each TabStrip tab by using the title attribute of the tab and render plain text in it.

class App extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            selected: -1
        }
    }
    handleSelect = (e) => {
        this.setState({selected: e.selected});
    }
    render() {
        return(
            <TabStrip selected={this.state.selected} onSelect={this.handleSelect}>
              <TabStripTab title="Tab 1 Title">
                  <p>Tab 1 Content</p>
              </TabStripTab>
              <TabStripTab title="Tab 2 Title">
                  <p>Tab 2 Content</p>
              </TabStripTab>
              <TabStripTab title="Tab 3 Title">
                  <p>Tab 3 Content</p>
              </TabStripTab>
            </TabStrip>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

Tabs on Initial Loading

The TabStrip displays no tabs upon its initial loading. To change this behavior, set the selected property of the TabStrip component.

class App extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            selected: 2
        }
    }
    handleSelect = (e) => {
        this.setState({selected: e.selected});
    }
    render() {
        return (
            <TabStrip selected={this.state.selected} onSelect={this.handleSelect}>
                <TabStripTab title="Tab 1 Title">
                    <p>Tab 1 Content</p>
                </TabStripTab>
                <TabStripTab title="Tab 2 Title">
                    <p>Tab 2 Content</p>
                </TabStripTab>
                <TabStripTab title="Tab 3 Title">
                    <p>Tab 3 Content</p>
                </TabStripTab>
            </TabStrip>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)

Disabled State

You can disable a specific TabStrip tab by setting the disabled property to true.

class App extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            selected: -1
        }
    }
    handleSelect = (e) => {
        this.setState({selected: e.selected});
    }
    render() {
        return (
            <TabStrip selected={this.state.selected} onSelect={this.handleSelect}>
                <TabStripTab title="Tab 1 Title">
                    <p>Tab 1 Content</p>
                </TabStripTab>
                <TabStripTab title="Tab 2 Title">
                    <p>Tab 2 Content</p>
                </TabStripTab>
                <TabStripTab disabled={true} title="Tab 3 Title">
                    <p>Tab 3 Content</p>
                </TabStripTab>
            </TabStrip>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
)
 /