在ant-design中,可以通过设置accordion
属性来实现只展开一个折叠面板的效果。accordion
属性是一个布尔值,当设置为true
时,只允许展开一个面板,其他面板将自动折叠。
以下是一个示例代码:
import { Collapse } from 'antd';
const { Panel } = Collapse;
function App() {
return (
<Collapse accordion>
<Panel header="面板1" key="1">
内容1
</Panel>
<Panel header="面板2" key="2">
内容2
</Panel>
<Panel header="面板3" key="3">
内容3
</Panel>
</Collapse>
);
}
export default App;
在上述代码中,通过将accordion
属性设置为true
,实现了只展开一个折叠面板的效果。每个面板都有一个唯一的key
属性,用于标识面板。当点击一个面板时,其他面板将自动折叠。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
领取专属 10元无门槛券
手把手带您无忧上云