I'm working with React.js and Carbon as Design System. I have a Tabs component with multiple Tab and I need to disable one of them if a condition is not satisfied.
I have tried to disable using the carbon class
className="bx--tabs__nav-item--disabled"
and also with prop disabled={true}but none of them works
There is some different way to disable the Tab element?? I know that avoid the onclick event works, but is no the prettiest way.
This is the code of the Tabs component.
<Tabs
tabContentClassName="tab-content"
className="tabs element-header__tabs"
>
<Tab
onClick={(e) =>
onclickHandler(e)
}
label="tab 1"
/>
<Tab
onClick={(e) =>
onclickHandler(e)
)
}
label="tab 2"
/>
<Tab
disabled={true}
onClick={(e) =>
onclickHandler(e)
)
}
label="tab 3"
/>
</Tabs>
For anyone else who stumbles across this...
disable={true}
Now works in the current version of Carbon Tabs. I'm not sure if it didn't work before but it does now...
https://www.carbondesignsystem.com/components/tabs/code
Related
After adding component={Link} in component. My react screen goes completely white, but when I not add Link component then it works fine.
<Tabs textColor="inherit" value={value} onChange={(e,val)=>setValue(val)}>
<Tab component={Link} to="/blogs" label="All Blogs"/>
<Tab label="My Blogs"/>
</Tabs>
and If I don't add Link component, then react page works. what' s the problem here ?
try this:
<Tab component={<Link/>} to="/blogs" label="All Blogs"/>
I need a condition for the below code, when we go through the address id, it will show only the upgrade page tab and will go through bricks, it will show only the new purchase page tab only.
Now it is showing both tabs. I need one tab for conditonally. Please help with this.
If I understand your question correctly, you can use the selectActive tab to hide / display the tab of your choice like this:
<Row className="mt-3">
<Col>
<Tabs onSelect={selectTab} defaultActiveKey={selectActive()} id="uncontrolled-tab-example" style={{ backgroundColor: 'rgb(237 245 240 / 38%)' }}>
{selectActive() === "newPurchase" && (
<Tab eventKey="newPurchase" title="New Webshop">
<NewPurchase/>
</Tab>
)}
{selectActive() === "upgrade" && (
<Tab eventKey="upgrade" title="Existing Webshop">
<Upgrade/>
</Tab>
)}
</Tabs>
</Col>
</Row>
It will show / hide the tab depending upon the value returned from the function. By the way, your question needs more clarity
ReactJS: I trying to fire mouse event clicking on evolution metrics tab but not working.How to do it.
<Tabs type="card">
<TabPane tab="evolution metrics" key="1" onClick={handleTab}>
Content of tab 1
</TabPane>
</Tab>
Might need to see more of the surrounding code, like the definition of handleTab, but sometimes what works is putting onClick={() => handleTab()}
because TabPane not support props onClick: https://ant.design/components/tabs/#Tabs.TabPane
You can use onChange on Tabs component: https://ant.design/components/tabs/#Tabs
<Tabs onChange={handleTab} />
I need my tabs to have a tab consisting of a switch but when I implemented it as it was said, I am not able to see it there.
Maybe it's hidden underneath but I tried changing its z-index.
Pass your Switch component as the label prop.
...
<Tab
component="span"
label={
<Switch
checked={isSwitchOn}
onChange={(e) => setSwitch(!isSwitchOn)}
name="toggleType"
/>
}
/>
Tab component does not display children props inside the MuiTab-wrapper element.
Maybe you can use icon props.
<Tab
component="span"
icon={
<Switch
checked={isSwitchOn}
onChange={(e) => setSwitch(!isSwitchOn)}
name="toggleType"
/>
}
/>
Using material-ui I'm attempting to iterate an array and render a item value as a tab. I'd like to have the tabs grow on load as per this example https://material-ui.com/utils/transitions/#grow.
I'm able to effectively do the iteration and show the tabs as follows;
<Tabs fullWidth value={value} onChange={this.handleChange} scrollable>
{this.props.myArray.map((p, i) =>
<Tab value={p.value} label={`${p.value}`}/>)}
</Tabs>
The logical approach would be;
<Tabs fullWidth value={value} onChange={this.handleChange} scrollable>
{this.props.myArray.map((p, i) =>
<Grow in={true} timeout={500}
<Tab value={p.value} label={`${p.value}`}/>
</Grow>)}
</Tabs>
But this does not work, "p" becomes inaccessible and it does not apply the Grow effect.
Is my best option to use the Tab source and create my own component that implements a transition as outlined here https://reactcommunity.org/react-transition-group/transition?
I'm happy to do this, but would obviously prefer the above method if there is a simple solution.
Thanks!