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} />
Related
How can I have a button triggering an ant.design Collapse component to expand all its tabs, or collapse all of them? I tried changing defaultActiveKey but I get the impression that this can only be changed when the page is rendered? If not, could someone provide a short snippet of a button collapsing multiple panels? The number of panels I have is set.
You should use component in controlled mode, that is you should supply value of panels which are open. For that you should use activeKey prop. Here is example:
let App = () => {
let [openPanels, setOpenPanels] = React.useState([]);
return (
<Collapse activeKey={openPanels} onChange={setOpenPanels}>
<Panel header="This is panel header 1" key="1">
<p>test1</p>
</Panel>
<Panel header="This is panel header 2" key="2">
<p>test2</p>
</Panel>
<Panel header="This is panel header 3" key="3">
<p>test3</p>
</Panel>
</Collapse>
);
};
Now you can easily add a button and on click set setOpenPanels([]) to collapse all of them.
i have this code, what i want to do on the tab prop is add Tooltip on the icon:
<Tabs.TabPane tab={<Tooltip placement="left" title="adasd"><Icon size="1.2" name="cog" /></Tooltip>} key="map">
<MapProperties onChange={onChange} canvasRef={canvasRef} />
</Tabs.TabPane>
i was expecting for the hover to show but it's not working. is it possible to add ant design tooltip on tabs pane?
Anuj's answer isn't correct since TabPane should be direct children of Tabs component. I also had such problem and I find out that i can solve it like this:
<TabPane
key="3"
tab={(
<Tooltip title="Your hint that appears after user's mouse will be over the tab title">
<span>tab title</span>
</Tooltip>
)}
disabled={mode === PageMode.NEW}
>
tab attribute accepts any ReactNode so we can just wrap our tab name with any component. And tooltip isn't exception.
Proof that this works
It should be like
<Tooltip title="foo">
<Tabs.TabPane>....</Tabs.TabPane>
</Tooltip>
https://ant.design/components/tooltip/#header
I am using the react-bootstrap Tab component and wish to include a button in the tab title. To set the text of the title you must pass the desired text as props. I want to include a button to remove the tab, appearing next to the text.
I have tried passing a function that returns the button element, but nothing displays in the tab title.
<Tab eventKey={data.name} title={data.name}>
<Button
className={classes.Button}
variant="secondary"
onClick={() => removeData({ id: data.id })}
>X</Button>
<TemplateTabs name={data.name} />
</Tab>
Right now the above code renders the button inside the tab page, whereas the desired location would be in the tab title. The template tabs component is what displays in the tab page. Ideally, I am looking for a way to continue to use the react-bootstrap Tab component, but be able to render the tab title and button to remove the said tab. Below is the documentation for the Tab component I am implementing from react-bootstrap. Please let me know if any more information would be useful.
https://react-bootstrap.github.io/components/tabs/
The documentation says type node: https://react-bootstrap.github.io/components/tabs/#tab-props
So this should work:
<Tab
eventKey={data.name}
title={
<>
{data.name}
<Button
className={classes.Button}
variant="secondary"
onClick={() => removeData({ id: data.id })}>
X
</Button>
</>
}>
<TemplateTabs name={data.name} />
</Tab>
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
I have an accordion of MaterialUI where I also added few icons but on click of those two particular icons, I don't want the accordion to get expanded or collapsed. I want other onClick event to happen for the click but not expand or collapse. Here is the code I am using.
<ExpansionPanel>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>
{name}
</Typography>
<ListItem>
<ListItemText />
<IconButton color="primary" aria-label="Edit" onClick={onClickEdit}>
<Edit />
</IconButton>
<IconButton onClick={onClickDelete} color="secondary" aria-label="Delete">
<Delete />
</IconButton>
</ListItem>
</ExpansionPanelSummary>
For click of two icons, I don't want accordion to expand or collapse. Is this anyway related?
You could stop the event from bubbling up to the parent in your onClickDelete or onClickEdit function:
function onClickDelete(event) {
event.stopPropagation();
// Handle click here
}
Here's a rough example:
https://codesandbox.io/s/54vypx6k9n
Well, stopPropagation may create many interesting unexpected behaviors:
Like body click listeners will not be fired.
Besides, you need to restyle the accordion header inner content to make sure it takes the whole inner space to catch the click event
Why not a simpler way, pure CSS:
.MuiAccordionSummary-root {
pointer-events: none;
}