<Tab /> Component

[levithomason]

http://semantic-ui.com/modules/tab.html

[mattmacpherson]

If anyone is looking for a good tab component for the time being, I would recommend react-tabs.

[tarang9211]

I'm picking this up! Will be creating a PR shortly. Please no duplicate PR's for this. 👍

[levithomason]

@tarang9211 There is a PR for this one here #430. It is quite stale, so updating it would be good as well.

[mattmacpherson]

@tarang9211 Check this out.

[camsjams]

@tarang9211 any status on the PR?

[levithomason]

Check the PR for the latest updates, I've been poking at this as I find time.

[AdeelK93]

Perhaps I'm missing something, but is this not already a thing? http://react.semantic-ui.com/collections/menu#menu-example-tabular

[agustif]

@AdeelK93 It references this https://semantic-ui.com/modules/tab.html not menus-related

[AdeelK93]

To me, the jquery semantic:
<div class="ui tabular menu">
looks identical to the react semantic:
<Menu tabular />
in terms of appearance and functionality, right?

[camsjams]

Update

I've been using the Menu component from Semantic React and it works fine for tabs!

Utilizing the Switch and Route components from React Router v4, you can do this (summarized code):

const STATES = {
	c1: 'c1',
	c2: 'c2',
	c3: 'c3'
};

// inside component ...
this.state = {
   activeItem: STATES.c1
};
handleItemClick(e, {name}) {
    this.setState({
        activeItem: name
    });
}
render() {
  return <div>
  <Menu attached="top" tabular>
    <Menu.Item
      name={STATES.c1}
      active={activeItem === STATES.c1}
      onClick={this.handleItemClick}/>
     {/* ... etc */}
  </Menu>
  <Segment attached="bottom">
  <Switch location={{pathname: this.state.activeItem}}>
    <Route exact path={STATES.c1}>
        <div>Content 1</div>
    </Route>
    <Route exact path={STATES.c2}>
        <div>Content 2</div>
    </Route>
    <Route exact path={STATES.c3}>
        <div>Content 3</div>
    </Route>
  </Switch>
  </Segment>
  </div>;
}

[levithomason]

Yep, this is exactly what this PR is doing :)

[smorin]

@levithomason Are you working on this PR? If not do you know whom is and it's status? Do you or that person need help?

[levithomason]

This is finally merged. It will go out in 0.70.0 very soon.