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,
);
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
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'm trying to add a tooltip on top of the panel header.
The issue is that when I add Tooltip inside panel item it appears for the panel content not for its header.
<Collapse>
<Panel
header="Header"
key="1"
id="1"
>
<Tooltip
title="Panel View 1"
className="tooltip"
>
<div>
<Paragraph>
Sample Text
<Paragraph/>
</div>
</Tooltip>
</Panel>
</Collapse>
Expected view
You need to add it to header props:
<Collapse>
<Panel
header={
<Tooltip
title="Panel View 1"
className="tooltip"
>
This is panel header 1
</Tooltip>
}
>
<p>{text}</p>
</Panel>
</Collapse>
Hey guys I'm a newbie trying to make a material UI temporary drawer and by default the value of the onClick event is a string and I have no idea how to convert it into an icon.
return (
<div>
{['Home'].map((anchor) => (
<React.Fragment key={anchor}>
<Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
<SwipeableDrawer
anchor={anchor}
open={state[anchor]}
onClose={toggleDrawer(anchor, false)}
onOpen={toggleDrawer(anchor, true)}
>
{list(anchor)}
</SwipeableDrawer>
</React.Fragment>
))}
</div>
);
As you can see: "HOME" is a string and what shows up on the site UI is just the "HOME" word that is a button. How do I format the code so the "HOME" button would not display a string but an icon instead. I'd be using MenuIcon from Material UI Icons to take its place. Thanks!!
You can use Icon component and pass the string to the children props. Before that, remember to add the material icon font to your html file
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
import IconButton from "#material-ui/core/IconButton";
import Icon from "#material-ui/core/Icon";
...
{["home", "star", "add_circle"].map((name) => (
<IconButton>
<Icon>{name}</Icon>
</IconButton>
))}
Live Demo
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