Bootstrap: Tabs

Basic Example

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.

var demo = React.createClass({
  handleSelect: function(itemprops) {
    alert(itemprops.pane);
  },
  render: function() {
    return (
      <TabList bsStyle='orange75' onTabSelect={this.handleSelect} listName='tab1'>
        <Tab pane='tab1:home' active>Home</Tab>
        <Tab pane='tab1:profile'>Profile</Tab>
        <Tab>
          <DropdownButton tab container={this} menu='menu33'>
            <span>Dropdown </span><Caret/>
          </DropdownButton>
          <Menu autoHide ref='menu33' bsStyle='orange75'>
            <MenuItem href='#'>
              <Tab dropdown pane='tab1:fat'>
                @fat
              </Tab>
            </MenuItem>
            <MenuItem href='#'>
              <Tab dropdown pane='tab1:mdo'>
                @mdo
              </Tab>
            </MenuItem>
          </Menu>
        </Tab>
      </TabList>
      <TabContent>
        <TabPane tab='tab1:home' active>
          <LoremIpsum query='5s' />
        </TabPane>
        <TabPane tab='tab1:profile'>
          <LoremIpsum query='5s' />
        </TabPane>
        <TabPane tab='tab1:fat'>
          <LoremIpsum query='5s' />
        </TabPane>
        <TabPane tab='tab1:mdo'>
          <LoremIpsum query='5s' />
        </TabPane>
      </TabContent>
    );
  }
});

Bootstrap: Tabs API

selectTab(key, value)

Select a tab programmatically by calling selectTab using a props key and value as a constraint.

var demo = React.createClass({
  componentDidMount: function(itemprops) {
    this.refs.tablist.selectTab('pane', 'tab2:profile');
  },
  render: function() {
    return (
      <TabList bsStyle='orange75' ref='tablist' listName='tab2'>
        <Tab pane='tab2:home' active>Home</Tab>
        <Tab pane='tab2:profile'>Profile</Tab>
        <Tab>
          <DropdownButton tab container={this} menu='menu34'>
            <span>Dropdown </span><Caret/>
          </DropdownButton>
          <Menu autoHide ref='menu34' bsStyle='orange75'>
            <MenuItem href='#'>
              <Tab dropdown pane='tab2:fat'>
                @fat
              </Tab>
            </MenuItem>
            <MenuItem href='#'>
              <Tab dropdown pane='tab2:mdo'>
                @mdo
              </Tab>
            </MenuItem>
          </Menu>
        </Tab>
      </TabList>
      <TabContent>
        <TabPane tab='tab2:home' active>
          <LoremIpsum query='5s' />
        </TabPane>
        <TabPane tab='tab2:profile'>
          <LoremIpsum query='5s' />
        </TabPane>
        <TabPane tab='tab2:fat'>
          <LoremIpsum query='5s' />
        </TabPane>
        <TabPane tab='tab2:mdo'>
          <LoremIpsum query='5s' />
        </TabPane>
      </TabContent>
    );
  }
});

Bootstrap: Pills

Basic Example

Similar markup to Tabs as above. Even the API is same as we reuse the same component.

<TabList pills bsStyle='orange75' listName='tab3'>
  <Tab pane='tab3:home' active>Home</Tab>
  <Tab pane='tab3:profile'>Profile</Tab>
  <Tab>
    <DropdownButton tab container={this} menu='menupills1'>
      <span>Dropdown </span><Caret/>
    </DropdownButton>
    <Menu autoHide ref='menupills1' bsStyle='orange75'>
      <MenuItem href='#'>
        <Tab dropdown pane='tab3:fat'>
          @fat
        </Tab>
      </MenuItem>
      <MenuItem href='#'>
        <Tab dropdown pane='tab3:mdo'>
          @mdo
        </Tab>
      </MenuItem>
    </Menu>
  </Tab>
</TabList>
<Grid>
  <Row>
    <Col xs={12}>
      <TabContent>
        <TabPane tab='tab3:home' active>
          <p><LoremIpsum query='5s' /></p>
        </TabPane>
        <TabPane tab='tab3:profile'>
          <p><LoremIpsum query='5s' /></p>
        </TabPane>
        <TabPane tab='tab3:fat'>
          <p><LoremIpsum query='5s' /></p>
        </TabPane>
        <TabPane tab='tab3:mdo'>
          <p><LoremIpsum query='5s' /></p>
        </TabPane>
      </TabContent>
    </Col>
  </Row>
</Grid>

Justified pills

Easily make tabs or pills equal widths of their parent.

<TabList pills bsStyle='orange75' listName='tab4'>
  <Tab pane='tab4:home' active>Home</Tab>
  <Tab pane='tab4:profile'>Profile</Tab>
  <Tab>
    <DropdownButton tab container={this} menu='menupills2'>
      <span>Dropdown </span><Caret/>
    </DropdownButton>
    <Menu autoHide ref='menupills2' bsStyle='orange75'>
      <MenuItem href='#'>
        <Tab dropdown pane='tab4:fat'>
          @fat
        </Tab>
      </MenuItem>
      <MenuItem href='#'>
        <Tab dropdown pane='tab4:mdo'>
          @mdo
        </Tab>
      </MenuItem>
    </Menu>
  </Tab>
</TabList>
<TabContent>
  <TabPane tab='tab4:home' active>
    <p><LoremIpsum query='5s' /></p>
  </TabPane>
  <TabPane tab='tab4:profile'>
    <p><LoremIpsum query='5s' /></p>
  </TabPane>
  <TabPane tab='tab4:fat'>
    <p><LoremIpsum query='5s' /></p>
  </TabPane>
  <TabPane tab='tab4:mdo'>
    <p><LoremIpsum query='5s' /></p>
  </TabPane>
</TabContent>