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>
);
}
Related
I'm using Next js with material UI, and I have this so far
<Tabs value={value} onChange={handleChange}>
<Link href="/" passHref>
<Tab label="Home"/>
</Link>
...
</Tabs>
The active tab indicator is working without the Link component from Nextjs. But as soon as I enclose my tabs with Link component to handle the routing, the tab indicator refuses to work. No errors are thrown either.
You need to pass the props to the child and give a value to Link.
function LinkTab(props) {
return <Link {...props}>
{React.cloneElement(props.children, {...props})}
</Link>
}
function MyComponent(props) {
let tab = "tab1";
return <Tabs value={tab}>
<LinkTab value="tab1" href="/tab1"><Tab component="a" label="A Tab"/></LinkTab>
</Tabs>
}
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
As mentioned in the title I have tabs component with few links.
tabs:
<AppBar color="default" position="relative">
<Tabs indicatorColor="primary" textColor="primary" value={activeTab} onChange={handleTabChange}>
{tabs.map((tab, i) => ( <Tab label={tab.label} id={`tab-${i}`} key={i} />))}
</Tabs>
</AppBar>
I have this tabs component placed in layout like this
<Container>
<TabsComponent />
{children}
</Container>
Now on each page I wrap my page content with this layout. Forgot to mention that these are nested routes.
Folder structure looks like this:
settings
application.tsx -> contains layout component
profile.tsx -> contains layout component
...
However this solution re-renders my tab component whenever I switch the page. Is there any way I can prevent this.
You can use the custom App file to add your TabsComponent to the whole app, like the following:
// _app.js
function MyApp({ Component, pageProps }) {
return(
<>
**<TabsComponent />**
<Component {...pageProps} />
</>
);
}
export default MyApp
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.
App.jsx is:
<ThemeProvider theme={theme}>
<div>
<Tabs index={0}>
<Tab label='Primary'><small>1Primary content</small></Tab>
<Tab label='Secondary'><small>Sec content</small></Tab>
</Tabs>
<Input label="test"/>
</div>
</ThemeProvider>
Error:
TypeError: Cannot read property 'pointer' of undefined Tabs.render #
line 240 var classNamePointer = (0,
_classnames4.default)(theme.pointer, _defineProperty({}, theme.disableAnimation, disableAnimatedBottomBorder));
Yo should add forceRenderTabPanel={true} to the tabs as such: .
It will keep track of the state across all three tabs and not just the one you are on.