Implement Tab Component

[manojktechie]

https://github.com/material-components/material-components-web/tree/feat/mdc-tabs/packages/mdc-tabs

[kradio3]

thanks, @manoj150283

[gasolin]

@manoj150283 do you have an example for tab component with Toolbar?

[kradio3]

Hi @gasolin , This example works for me:

        <Toolbar 
          fixed
          z={4} 
        >
          <ToolbarSection>
            <Tabbar>
              <Tab 
                active={this.state.activeTab===1}
                onClick={() => {this.setState({activeTab:1})}}
              >
                Item One
              </Tab>
              <Tab 
                active={this.state.activeTab===2}
                onClick={() => {this.setState({activeTab:2})}}
              >
                Item Two
              </Tab>
              <Tab 
                active={this.state.activeTab===3}
                onClick={() => {this.setState({activeTab:3})}}
              >
                Item Three
              </Tab>
            </Tabbar>
          </ToolbarSection>
        </Toolbar>

[gasolin]

@kradio3 thanks it works, though if I wrap the tab text content with <a> or Link from react-router-dom, the Tab will looks like a url but not the tab anymore. Not sure if its intended.

The workaround now is adding extra style in each link to inherit the style.

const linkStyle = {
  color: "inherit",
  textDecoration: "inherit",
}

<Tab>
<Link style={linkStyle}></Link>
</Tab>