React Bootstrap 下拉菜单

下拉菜单为导航项提供可切换的子菜单。它用于显示菜单项的子类别或选项。通常，它用于显示导航项的选项。例如，如果你有一个产品菜单项，并想创建一个带有不同产品的子菜单，你可以使用下拉菜单来实现一个简单的布局。

Bootstrap 下拉菜单使用 Bootstrap JavaScript 库 popper.js 构建。它会在所有视口上自动定位下拉菜单及其内容，并根据导航选项动态调整位置。

但是，在 React Bootstrap 中，我们不需要明确定义任何 JS 库；下拉菜单所需的所有 JavaScript 都在 <Dropdown> 组件本身中定义。

让我们了解一下如何使用 Bootstrap 在 React 中创建下拉菜单。

如何在 React JS 中创建下拉菜单？

React Bootstrap 下拉菜单的设计目的是为了在不同情况下更通用和应用程序友好。因此，我们不需要在项目中明确定义 JQuery 或其他 JavaScript 库；相反，它在 <Dropdown> 组件本身中包含了所有必需的 JavaScript。

要使用 React Booitstrap 创建下拉菜单，请在 <Dropdown> 和 <Dropdown.toggle> 组件中定义下拉导航按钮或项目，并在 <Dropdown.Item> 组件中定义下拉菜单项。

按如下方式导入下拉菜单组件

让我们通过一个基本的下拉菜单示例来理解它

App.js

输出

从上面的输出中，我们可以看到一个下拉菜单被创建了。默认情况下，它与不同视口上的导航按钮正确对齐。

React Bootstrap 支持 <Dropdown>、<Dropdown.Toggle> 和 <Dropdown.Menu> 组件的替代组件，即 <DropdownButton>。 <DropdownButton> 组件结合了所有三个组件，并允许我们编写最少的组件。 考虑以下示例

输出

从上面的输出中，我们使用 <DropdownButton> 组件创建了一个下拉菜单。 它允许我们编写最少的组件，但我们需要将其与 Dropdown 组件一起导入。

带有单独下拉图标的下拉菜单

我们还可以为切换下拉菜单创建一个单独的拆分按钮。 要创建拆分下拉菜单，请使用 Dropdown 组件作为按钮组，通过指定 as 属性，并使用 Dropdown.Toggle 组件作为切换图标。

考虑下面的示例

输出

从上面的输出中，我们可以看到下拉切换按钮现在与导航文本分开了。

下拉菜单大小

size 属性允许我们定义下拉菜单的大小。 我们可以使用 sm、lg 作为 prop 值来指定下拉菜单的大小。

考虑下面的示例

App.js

输出

深色背景

要将深色背景应用于下拉菜单，请将 variant 属性与值 dark 一起传递。它将为下拉菜单应用深色背景颜色。 同样，我们也可以使用其他变体，例如 primary、success、danger 等。

考虑以下代码片段

输出

下拉菜单方向

我们可以通过指定 drop 属性来指定下拉菜单的方向。 drop 属性允许我们指定四个值 up、down、start 和 end。 默认情况下，它设置为 down。

考虑下面的示例

输出

从上面的输出中，我们可以看到下拉菜单以不同的方向创建。 它们的方向由箭头图标指示。 当我们切换菜单时，它将在相应的方向上折叠。

菜单对齐

默认情况下，下拉菜单从左侧开始，但我们可以使用 align 属性更新其对齐方式。 我们可以将值 align="end" 值传递给 <Dropdown>、<DropdownButton> 和 <SplitButton> 组件，以相应地对齐下拉菜单。

考虑以下代码片段

输出

从上面的输出中，我们可以看到下拉菜单内容已对齐到组件的末尾。

菜单标题

要指定菜单标题，请使用 <Dropdown.Header> 组件。 它将向下拉菜单添加一个标题。 考虑以下示例

输出

菜单分隔符

分隔符对于创建一组单独的相关菜单项很有用。 我们可以通过添加 <Dropdown.Divider> 组件将分隔符添加到下拉菜单中。

考虑以下示例

输出

自动关闭菜单

下拉菜单的默认行为是当选择一个菜单项或我们在下拉菜单外部单击时关闭。 但是，我们可以通过指定 autoClose 属性来覆盖此行为。

考虑下面的示例

当我们将 autoClose="inside" 属性指定给下拉菜单时，它不会通过在下拉菜单外部单击而关闭。

同样，我们可以将 autoClose 值传递给 outside 和 false。