Vertical Tabs Example - React Material UI

example_vertical_tabs_react_material_ui.js

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: 24 }}>
      {props.children}
    </Typography>
  );
}

export default ProfileTabs;

Hey Idris, Just now seeing this email. You can style the button components within the "const MyTab = withStyles(...)" function. I've created a demo here: https://codesandbox.io/embed/vertical-tabs-with-more-styles-5is5w The properties available to style are covered in the material-ui docs here: https://material-ui.com/api/tab/#css The default theme properties are available here: https://material-ui.com/customization/default-theme/ good luck, Frank

…

On Tue, Jun 25, 2019 at 1:27 AM Idris Adetunmbi ***@***.***> wrote: Thanks for this gist. Any idea how I can override the styles for the ButtonBase parent component of the Tab? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/1a332cf84455aafc2dcd2716ee14fcc1?email_source=notifications&email_token=AEZAIMJCF6TPTJKCWEEAAG3P4GUFXA5CNFSM4H3ATJG2YY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAFUHR4#gistcomment-2952990>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEZAIMKVSKSUTIEHGTY2SCDP4GUFXANCNFSM4H3ATJGQ> .

-- Frank Ali

--They paved paradise and put up a parking lot

Your article is very helpful to this new-to-react developer. Maybe you can help with one thing: I need a react vertical tab component that takes images rather than text labels. Do you know how to do it? If not, at least your article gives me the idea to make my own react component for the left-hand navigation I need; I'll just have to work out the tie to show the right tab container on click.

Hey @dalepres, I made this gist when material UI didn't have a way to make vertical tabs. They have now incorporated the idea in the library it self. They have an orientation prop that you could set to vertical. See api here: https://material-ui.com/api/tabs/

As regards your question, what you want to achieve is so that you click on the images and the content of the page changes? Is that what you're thinking?

hafbau, I did get a Material-UI tabs working with images with some great help on stackoverflow.com. There were several undocumented features and steps required to make it happen. I'm learning that material-ui is a great and maturing package but may not as mature as I had initially thought. That's not an issue and I appreciate all the great work from those who create and support it. I'm looking forward to learning it more thoroughly.

Thank you.

Thanks so much. this is what i really needed 😁