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.
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.
Related
I'm using UI Kitten <Tab/> in my React Native app, and it's difficult to click. It seems as though only a tiny fraction of the tab at the bottom is actually clickable. My code is:
import { Layout, Tab, TabView } from '#ui-kitten/components';
...
<TabView>
<Tab title="Title">
...
</Tab>
<Tab title="Title">
...
</Tab>
</TabView>
I found that if I added <Tab title="Title" style={{height: '100%'}}> it does make it easier to press, but it's then much taller than I want.
Does anyone know how I can approach this?
SOLUTION:
It was an error elsewhere in my code. I had a component with opacity 0 sitting in front of the tabs.
I'm using chakra-ui to build a web app, in which I have three tabs, each with their own state. The state of each tab should be shared between all the other tabs. But if I lift up all the states to the parent and pass them as props to each tab, it gets laggy because every time I change something in a tab, it rerenders everything.
Are there other ways to share data between them or, if only lift state up works, prevent rerender of inactive tabs?
<Tabs>
<TabList>
<Tab>Cálculos</Tab>
<Tab>Gráficos</Tab>
<Tab>Resultados</Tab>
</TabList>
<Stack direction='row'>
<TabPanels >
<TabPanel m={0} p={0} w='full' h='full'>
<Calculations testStarted={testStarted} />
</TabPanel>
<TabPanel m={0} p={0} w='full' h='full'>
<Graphics testStarted={testStarted} />
</TabPanel>
<TabPanel m={0} p={0} w='full' h='full'>
<Results testStarted={testStarted} />
</TabPanel>
</TabPanels>
</Stack>
</Tabs>
You can use useContext
React Beta docs has a good visual tutorial on this:
https://beta.reactjs.org/learn/passing-data-deeply-with-context
I am trying to implement react tabs in my Next.js applications. I have installed react tab packages and put the code but unfortunately, it doesn't work.
When I click on title 1 it doesn't move any content 1 same as clicking title2.
But the same code works in a new React application. Below is the code:
const Rtab = () => {
return(
<Tabs>
<TabList>
<Tab>Title 1</Tab>
<Tab>Title 2</Tab>
</TabList>
<TabPanel>
<h2>Any content 1</h2>
</TabPanel>
<TabPanel>
<h2>Any content 2</h2>
</TabPanel>
</Tabs>
);
}
I have a TabContext like so:
<TabContext value={selectedTab.toString()}>
<TabList>
<Tab>Hi</Tab>
<Tab>Hi2</Tab>
</TabList>
</TabContext>
However, all the tabs are aligned to the right, I want to align them to the center. With the Tabs object, I can just pass the centered attribute, however, it doesn't work the same with the TabContext.
How can I center the TabContext like how we do with the Tabs?
From the TabList documentation => Props of the Tabs component are also available
So you can write :
<TabList centered>
<Tab>Hi</Tab>
<Tab>Hi2</Tab>
</TabList>
I am new to React. I am using React web tabs to create tabs in react.
How would one go about triggering a change of tab panels upon clicking a button element, I have two button, "Previous" & "Next". On click of previous button , i want to go to previous tab & On next button click it should show next tab ?
<Tabs defaultTab="one" vertical className="vertical-tabs" selectedIndex={this.state.selectedTabIndex}
onSelect={this.handleSelect}>
<TabList>
<Tab tabFor="one" >BASIC INFORMATION</Tab>
<Tab tabFor="two" >ADVANCED INFORMATION</Tab>
<Tab tabFor="three">ASSIGN USERS</Tab>
<Tab tabFor="four" >TEMPLATE</Tab>
</TabList>
<TabPanel tabId="one">
//BASIC INFORMATION
</TabPanel>
<TabPanel tabId="two">
//ADVANCED INFORMATION
</TabPanel>
<TabPanel tabId="three">
//ASSIGN USERS
</TabPanel>
<TabPanel tabId="four">
//TEMPLATE
</TabPanel>
{
<div>
<Button onClick={()=>this.handlePreviousBtnChange()}>Back</Button>
</div>}{<div>
<Button onClick={()=>this.handleNextBtnChange()}>Next</Button>
</div>}
</Tabs>
Please help me.Thanks in advance
According to this closed issue on the project, you should be able to use defaultTab to programmatically change the selected tab. https://github.com/marcuslindfeldt/react-web-tabs/issues/10#issuecomment-482846520
Here's a short example. I made the tab ids numbers to make incrementing/decrementing easier.
const ControllableTabs = () => {
const [selectedTab, setSelectedTab] = useState(0);
const tabCount = 3;
return (
<>
<Tabs defaultTab={selectedTab.toString()}>
<TabList>
<Tab tabFor="0">Tab 1</Tab>
<Tab tabFor="1">Tab 2</Tab>
<Tab tabFor="2">Tab 3</Tab>
</TabList>
<TabPanel tabId="0">
<p>Tab 1 content</p>
</TabPanel>
<TabPanel tabId="1">
<p>Tab 2 content</p>
</TabPanel>
<TabPanel tabId="2">
<p>Tab 3 content</p>
</TabPanel>
</Tabs>
<Button onClick={() => setSelectedTab((selectedTab + tabCount - 1) % tabCount )}>Back</Button>
<Button onClick={() => setSelectedTab((selectedTab + 1) % tabCount )}>Next</Button>
</>
);
}
I should note that there are other libraries that possibly suit your needs better, depending on the functionality that you desire. If you happen to be using material-ui in your project already, the Stepper component provides much more customizability. https://material-ui.com/components/steppers/#stepper