React Bootstrap 折叠面板

手风琴是一系列可折叠面板，其中包含具有某些内容的容器。 手风琴菜单广泛用于 Web 应用程序中，用于使用导航列表管理内容。 React Bootstrap 手风琴提供了一种无需使用状态即可管理可折叠列表的简便方法。 切换功能背后的 JavaScript 代码是在 Accordion 组件本身中编写的。 我们需要从 react-bootstrap 库中添加和导入该组件。

让我们了解如何使用 React Bootstrap 在 React 项目中创建手风琴

如何使用 React Bootstrap 在 React 中创建手风琴？

要在 React 项目中使用 Bootstrap 创建手风琴，我们必须使用 <Accordion></Accordion> 组件并从 react-bootstrap 库中导入它，如下所示

Accordion 组件包含几个子组件，例如 <Accordion.Item>、<Accordion.Header> 和 <Accordion.Body> 以定义手风琴元素。

让我们了解如何使用这些组件。 考虑下面的例子

App.js

输出

当我们单击手风琴主体时，它将打开相应的手风琴内容并将其突出显示为活动状态。

当我们单击其他手风琴主体时，它将打开该手风琴内容并关闭另一个。

defaultActiveKey 属性允许 Accordion 在渲染时处于活动状态。 让我们看看如何创建一个完全折叠的手风琴。

完全折叠的手风琴

要创建一个完全折叠的手风琴，请避免使用 defaultActiveKey 属性。 它将呈现所有未关闭的手风琴。

考虑下面的示例

输出

在这里，我们有一个完全折叠的手风琴。 当我们单击任何手风琴时，它将根据选择打开手风琴内容。

flush Prop

flush 属性用于从手风琴中删除默认样式，例如背景颜色、边框和边框半径。 手风琴将与其父容器边缘到边缘地渲染。

考虑下面的示例

输出

从上面的输出中，我们可以看到背景颜色、边框半径和其他样式已从手风琴中删除。

alwaysOpen Prop

alwaysOpen 属性用于在打开其他项目时保持手风琴项目处于活动状态。 我们可以通过为 activeKey 或 defaultActiveKey 定义字符串数组来控制组件。

让我们通过下面的例子来理解它。

App.js

输出

从上面的输出中，我们可以看到第一个手风琴始终处于打开状态，而另一个也处于打开状态。 同样，我们可以将 alwaysOpen 属性用于其他手风琴项目。

如何自定义 React 中的手风琴？

我们可以在 React 中自定义手风琴并创建类似 Bootstrap 4 的基于卡片的手风琴。要自定义手风琴，我们必须使用手风琴切换功能 useAccordionButton。 它将允许我们切换手风琴内容。

考虑下面的示例

App.js

输出

因此，我们可以根据我们的要求自定义手风琴。

当手风琴内容可见时，我们也可以使用不同的切换按钮样式。 让我们了解如何实现这一点。

具有扩展意识的自定义手风琴

如果手风琴内容已展开，我们可以应用手风琴切换的不同样式。 我们可以通过使用 useAccordionButton 钩定义一个上下文感知的自定义切换来实现此目的。

考虑下面的示例

App.js

输出

从上面的输出中，我们可以看到当手风琴内容展开时，切换按钮变体是成功的，而当它隐藏时，手风琴按钮变体是主要的。 同样，我们可以为手风琴切换按钮提供任何样式。