Tabs

Controlled

Tabs controls its own state by default, and can optionally be managed by the application as a controlled component through the selectedTabIndex prop. A callback for onChange is also provided.

Malachite is a copper carbonate hydroxide mineral, with the formula Cu2CO3(OH)2. This opaque, green banded mineral crystallizes in the monoclinic crystal system, and most often forms botryoidal, fibrous, or stalagmitic masses, in fractures and spaces, deep underground, where the water table and hydrothermal fluids provide the means for chemical precipitation.

() => {
  class MyTabs extends Component {
    constructor(props) {
      super(props);

      this.state = {
        selectedTabIndex: 0
      };

      this.handleChange = this.handleChange.bind(this);
      this.resetDefaultSelected = this.resetDefaultSelected.bind(this);
    }

    handleChange(selectedTabIndex) {
      this.setState({
        selectedTabIndex
      });
    }

    resetDefaultSelected() {
      this.setState({
        selectedTabIndex: 0
      });
    }

    render() {
      return (
        <DemoLayout>
          <Button minimal size="small" onClick={this.resetDefaultSelected}>Reset to Default Selected</Button>
          <Tabs
            onChange={this.handleChange}
            selectedTabIndex={this.state.selectedTabIndex}
            label="Minerals"
            height="7.75em"
          >
            <Tab title="Malachite">
              <Text>{content.malachite}</Text>
            </Tab>
            <Tab title="Fluorite">
              <Text>{content.fluorite}</Text>
            </Tab>
            <Tab title="Magnetite">
              <Text>{content.magnetite}</Text>
            </Tab>
          </Tabs>
        </DemoLayout>
      );
    }
  }

  return <MyTabs />;
};