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

Tab Position

The tabPosition property allows placing the TabStripNavigation on different positions around the content.

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

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

const data = ['top', 'bottom', 'left', 'right']

class App extends React.Component {
    state = {
        selected: 0,
        position: 'top'
    }
    handleSelect = (e) => {
        this.setState({ selected: e.selected })
    }

    handleChange = (e) => {
        this.setState({
            position: e.target.value
        })
    }
    render() {
        return (
            <React.Fragment>
                <div className="example-config">
                    <h6>Change taps position: </h6>
                    <DropDownList data={data} defaultValue="top" onChange={this.handleChange} />
                </div>
                <hr />
                <TabStrip
                    selected={this.state.selected}
                    onSelect={this.handleSelect}
                    tabPosition={this.state.position}
                >
                    <TabStripTab title="Paris">
                        <div>
                            <p>
                                Paris is the capital and most populous city of France. It has an area of 105 square kilometres (41 square miles) and a population in 2013 of 2,229,621 within its administrative limits. The city is both a commune and department, and forms the centre and headquarters of the Île-de-France, or Paris Region, which has an area of 12,012 square kilometres (4,638 square miles) and a population in 2014 of 12,005,077, comprising 18.2 percent of the population of France.
                  </p>
                        </div>
                    </TabStripTab>
                    <TabStripTab title="New York City">
                        <div>
                            <p>
                                The City of New York, often called New York City or simply New York, is the most populous city in the United States. With an estimated 2015 population of 8,550,405 distributed over a land area of just 305 square miles (790 km2), New York City is also the most densely populated major city in the United States. Located at the southern tip of the state of New York, the city is the center of the New York metropolitan area, one of the most populous urban agglomerations in the world.
                  </p>
                            <p>
                                A global power city, New York City exerts a significant impact upon commerce, finance, media, art, fashion, research, technology, education, and entertainment, its fast pace defining the term New York minute. Home to the headquarters of the United Nations, New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.
                  </p>
                        </div>
                    </TabStripTab>
                    <TabStripTab title="Tallinn">
                        <div>
                            <p>
                                Tallinn is the capital and largest city of Estonia. It is situated on the northern coast of the country, on the shore of the Gulf of Finland, 80 km (50 mi) south of Helsinki, east of Stockholm and west of Saint Petersburg. From the 13th century until 1918 (and briefly during the Nazi occupation of Estonia from 1941 to 1944), the city was known as Reval. Tallinn occupies an area of 159.2 km2 (61.5 sq mi) and has a population of 443,894. Approximately 32% of Estonia's total population lives in Tallinn.
                  </p>
                            <p>
                                Tallinn was founded in 1248, but the earliest human settlements are over 5,000 years old, making it one of the oldest capital cities of Northern Europe. Due to its strategic location, the city became a major trade hub, especially from the 14th to the 16th century, when it grew in importance as part of the Hanseatic League.
                  </p>
                        </div>
                    </TabStripTab>
                    <TabStripTab title="Sydney" disabled={true}></TabStripTab>
                </TabStrip>
            </React.Fragment>
        )
    }
}
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')
);