首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在ant-design中只展开一个折叠面板

在ant-design中,可以通过设置accordion属性来实现只展开一个折叠面板的效果。accordion属性是一个布尔值,当设置为true时,只允许展开一个面板,其他面板将自动折叠。

以下是一个示例代码:

代码语言:txt
复制
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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券