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

Closable Tabs

You can enable the user to close specific TabStrip tabs. The implementation of the closable tabs functionality requires you to use a custom component and render a title with a button for closing the tab.

import React from 'react';
import ReactDOM from 'react-dom';

import { TabStrip, TabStripTab } from '@progress/kendo-react-layout';
import '@progress/kendo-react-intl';
import '@progress/kendo-react-dropdowns';
import 'react-router-dom';

const tabs = [
  { title: 'Paris', content: 'Paris is the capital and most populous city of France.', visible: true },
  { title: 'New York City', content: 'The City of New York, often called New York City or simply New York, is the most populous city in the United States.', visible: true },
  { title: 'Tallinn', content: 'Tallinn is the capital and largest city of Estonia.', visible: true },

];

const Title = (props) => {
  return (
    <span className="k-item k-state-default">
      <span className="k-link">{props.content}</span>
      <span className="k-link" onClick={() => props.onTabRemove(props.content)}>
        <span className="k-icon k-i-x" />
      </span>
    </span>
  )
};

class App extends React.Component {

  state = {
    selected: 0,
    tabs: tabs
  };

  handleSelect = (e) => {
    this.setState({ selected: e.selected });
  };

  removeTab = (tab) => {
    let newTabs = this.state.tabs.filter(item => { return item.title !== tab; });
    this.setState({ tabs: newTabs });
  };

  render() {
    return (
      <TabStrip selected={this.state.selected} onSelect={this.handleSelect}>
        {
          this.state.tabs.map((item, index) => {
            return item.visible && <TabStripTab title={<Title content={item.title} onTabRemove={this.removeTab} />} key={index}>
              <div>
                <p>{item.content}</p>
              </div>
            </TabStripTab>
          })
        }
      </TabStrip>
    )
  }
}
ReactDOM.render(
  <App />,
  document.querySelector('my-app')
);
 /