React Bootstrap 侧边栏

我们可以使用 React Bootstrap 的 Offcanvas 组件为导航、购物车等应用程序创建隐藏的侧边栏。

React Bootstrap Offcanvas 组件

React Bootstrap 允许我们为不同的位置创建隐藏的侧边栏。它包括带有关闭按钮的标题和一个可选的正文类，以便更好地对齐内容与初始填充。 但是，我们可以使用 Offcanvas 而无需指定标题和正文，但建议使用带有关闭操作的标题，以提供显式的关闭操作。

要使用 Offcanvas 组件创建侧边栏，请指定 <Offcanavs>、<Offcanvas.Header>、<Offcanvas.body> 和 <Offcanvas.Footer> 组件及其内容。它们将按如下方式导入

我们可以通过更新 Offcanvas 组件的状态来处理切换功能。

考虑下面的示例

App.js

输出

从上面的示例中，它将呈现“启动侧边栏”按钮。 当我们单击此按钮时，它将打开侧边栏。 默认情况下，画布位置是 start，因此它将从左侧打开。 我们可以使用任何组件或图标来显示侧边栏，而不是按钮组件。

当我们点击“启动侧边栏”按钮时，我们将获得以下输出

我们还可以在侧边栏元素上有一个垂直导航菜单。 对于渲染导航，我们可以使用 Nav 组件。

定位 Offcanvas

我们可以将 offcanvas 定位在不同的方向。它支持以下位置来打开 Offcanvas 组件。 我们可以使用 placement 属性指定这些位置。

start： start 值会将 offcanvas 定位在视口的左侧。

end： end 值会将容器定位在视口的右侧

top： top 值会将容器定位在视口的顶部

bottom： bottom 值会将容器定位在视口的底部。

让我们通过以下示例来理解它

App.js

输出

上面的侧边栏从视口的右侧开始。 同样，我们可以相应地使用顶部和底部值。

Offcanvas 背景幕

Offcanvas 支持多个背景幕属性来控制侧边栏行为。 Offcanvas 的默认行为将阻止正文滚动，并在单击外部侧边栏时关闭。 但是，我们可以使用 scroll 和 backdrop 属性覆盖此行为。

考虑下面的示例

App.js

输出

从上面的输出中，当我们单击背景幕覆盖层时，背景幕覆盖层功能将不起作用； 它不会关闭侧边栏。

启用正文滚动

默认情况下，Offcanvas 在显示时会阻止正文滚动，但我们可以通过将 scroll= "true" 值传递给 Offcanvas 组件来覆盖此行为。