在使用react-bootstrap accordion时扩展单个卡片,可以通过设置defaultActiveKey
属性来控制默认展开的卡片。同时,可以使用eventKey
属性为每个卡片指定唯一的标识符。
以下是一个示例代码:
import React from 'react';
import { Accordion, Card, Button } from 'react-bootstrap';
const MyAccordion = () => {
return (
<Accordion defaultActiveKey="0">
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Card 1
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
Content for Card 1
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="1">
Card 2
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="1">
<Card.Body>
Content for Card 2
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
);
}
export default MyAccordion;
在上述代码中,我们使用了Accordion
、Card
和Button
组件来创建一个手风琴效果的卡片列表。每个卡片都有一个eventKey
属性来唯一标识该卡片。通过设置defaultActiveKey
属性为"0",可以默认展开第一个卡片。
你可以根据需要添加更多的卡片,并为每个卡片设置不同的eventKey
值。这样,当点击对应的按钮时,相应的卡片就会展开或折叠。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
领取专属 10元无门槛券
手把手带您无忧上云