Forked from hafbau/example_vertical_tabs_react_material_ui.js
Created
January 20, 2019 19:10
-
-
Save manniru/e8f28640df2e3eee102964f45cd52b5a to your computer and use it in GitHub Desktop.
Vertical Tabs Example - React Material UI
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| import Tabs from '@material-ui/core/Tabs' | |
| import Tab from '@material-ui/core/Tab' | |
| import Typography from '@material-ui/core/Typography' | |
| import { withStyles } from '@material-ui/core/withStyles'; | |
| class ProfileTabs extends React.PureComponent { | |
| state = { activeIndex: 0 } | |
| handleChange = (_, activeIndex) => this.setState({ activeIndex }) | |
| render() { | |
| const { activeIndex } = this.state; | |
| return ( | |
| <div | |
| style={{ | |
| display: 'flex', | |
| }} | |
| > | |
| <VerticalTabs | |
| value={activeIndex} | |
| onChange={this.handleChange} | |
| > | |
| <MyTab label='item one' /> | |
| <MyTab label='item two' /> | |
| <MyTab label='item three' /> | |
| </VerticalTabs> | |
| { activeIndex === 0 && <TabContainer>Item One</TabContainer> } | |
| { activeIndex === 1 && <TabContainer>Item Two</TabContainer> } | |
| { activeIndex === 2 && <TabContainer>Item Three</TabContainer> } | |
| </div> | |
| ) | |
| } | |
| } | |
| const VerticalTabs = withStyles(theme => ({ | |
| flexContainer: { | |
| flexDirection: 'column' | |
| }, | |
| indicator: { | |
| display: 'none', | |
| } | |
| }))(Tabs) | |
| const MyTab = withStyles(theme => ({ | |
| selected: { | |
| color: 'tomato', | |
| borderBottom: '2px solid tomato' | |
| } | |
| }))(Tab); | |
| function TabContainer(props) { | |
| return ( | |
| <Typography component="div" style={{ padding: 8 * 3 }}> | |
| {props.children} | |
| </Typography> | |
| ); | |
| } | |
| export default ProfileTabs; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment