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.
Related
I want to expand a specific pannel of the Ant design collapse by clicking the next button it should expand the next panel. Here is the codesandbox link. Here is the screenshot of it as well.
You just need to save the key in state of panel that you want to open it. You want to open the second panel when button in first panel is clicked. You save that Panel key is state and need to pass that active key to Collapse as a prop.
const App: React.FC = () => {
const [activeKey, setActiveKey] = useState(1);
function handleClick(key) {
setActiveKey(key);
}
return (
<Collapse defaultActiveKey={["1"]} activeKey={activeKey} ghost>
<Panel header='This is panel header 1' key='1'>
<p>{text}</p>
<button onClick={() => handleClick("2")}>Next</button>
</Panel>
<Panel header='This is panel header 2' key='2'>
<p>{text}</p>
<button onClick={() => handleClick("3")}>Next</button>
</Panel>
<Panel header='This is panel header 3' key='3'>
<p>{text}</p>
</Panel>
</Collapse>
);
};
export default App;
Since you didn't provide specify whether it should close the existing panel or not. It does close the existing panel then above solution fines. But if you want to open multiple panels at a time then you need to change the code.
<Collapse activeKey={activeKey}>
You can activeKey as an array instead of string or number. In array you can pass any number of Panel keys like this: ['1', '2', ...].
Check the Antd Collapse API
I found a solution finally
const App: React.FC = () => {
const [activeKey, setActiveKey] = useState(['1']);
function handleClick(key) {
console.log(key)
setActiveKey(key);
}
return (
<Collapse
defaultActiveKey={["1"]}
activeKey={activeKey}
ghost
onChange={handleClick}
>
<Panel header="This is panel header 1" key="1">
<p>{text}</p>
<button value='2' onClick={(e) => handleClick(e.target.value)}>Next</button>
</Panel>
<Panel header="This is panel header 2" key="2">
<p>{text}</p>
<button value='3' onClick={(e) => handleClick(e.target.value)}>Next</button>
</Panel>
<Panel header="This is panel header 3" key="3">
<p>{text}</p>
</Panel>
</Collapse>
);
};
export default App;
Here is the codesandbox link
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'm using Ant-design collapse as accordian , my requirement is when I load page by default first panel should open, and also when I click on other panel whartever the panel is already open should close and only clicked panel should expand.Can someone please help me on this.
I'm using Ant-design collapse :
https://ant.design/components/collapse/
Regards,
You need to use 'accordion' and 'defaultActiveKey' properties. Something like:
import { Collapse } from 'antd';
const { Panel } = Collapse;
const text = `
A dog is a type of domesticated animal.
Known for its loyalty and faithfulness,
it can be found as a welcome guest in many households across the world.
`;
ReactDOM.render(
<Collapse accordion defaultActiveKey={['1']}>
<Panel header="This is panel header 1" key="1">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 2" key="2">
<p>{text}</p>
</Panel>
<Panel header="This is panel header 3" key="3">
<p>{text}</p>
</Panel>
</Collapse>,
mountNode,
);
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>