How to make vertical tabs with React

user_8810941 0
Viewed 8415

Can someone provide me with a way to create vertical tabs using React?

I experimented with various npm packages like react-web-tabs,reactstrap and react-bootstrap.The last two only had examples for horizontal tabs.React-web-tabs has a vertical tab example in their docs but it doesn't work. 

import { Tabs, Tab, TabPanel, TabList } from 'react-web-tabs';

class NewNavigation extends React.Component{
render(){
return(
    <Tabs defaultTab="vertical-tab-one" vertical>
        <TabList>
            <Tab tabFor="vertical-tab-one">Tab 1</Tab>
            <Tab tabFor="vertical-tab-two">Tab 2</Tab>
            <Tab tabFor="vertical-tab-three">Tab 3</Tab>
        </TabList>

        <TabPanel tabId="vertical-tab-one">
            <p>Tab 1 content</p>
        </TabPanel>

        <TabPanel tabId="vertical-tab-two">
            <p>Tab content</p>
        </TabPanel>

        <TabPanel tabId="vertical-tab-three">
            <p>Tab 3 content</p>
        </TabPanel>
    </Tabs>
    );
}
}

By now, it displays basic horizontal tabs and I want to fix this code as it displays vertical tabs.It is also highly appreciated if you recommend any other way.

reactjs vertical-alignment
1 Answers

By adding following CSS will do the trick for you:

.rwt__tab  {
  width: 100%
}

Another way is to import the CSS file in your component by adding the following line:

import 'react-web-tabs/dist/react-web-tabs.css';

Here is the example if for your reference.

user_89044240
Related