滑动导航（Offcanvas）

使用一些类和我们的JavaScript插件在项目中构建隐藏的侧边栏，用于导航、购物车等。

On this page

工作原理

Offcanvas是一个侧边栏组件，可以通过JavaScript进行切换，从视口的左、右或下边缘显示。按钮或锚点用作触发器，附加到您切换的特定元素，数据属性用于调用我们的JavaScript。

  • Offcanvas与modals共享一些相同的JavaScript代码。从概念上讲，它们非常相似，但它们是独立的插件。
  • 类似地，offcanvas的样式和维度的一些源Sass变量是从modal的变量继承的。
  • 当显示时，Offcanvas包括一个默认的背景，可以点击隐藏隐藏的画布。
  • 与模态框类似，一次只能显示一个offcanvas。

注意！ 考虑到CSS处理动画的方式，您不能在.offcanvas元素上使用margin或translate。相反，将类用作独立的包装元素。

此组件的动画效果取决于“首选简化运动媒体”查询。

示例

组件

下面是一个默认显示的offcanvas示例（via.show on.offcanvas）。Offcanvas包括对带有关闭按钮的标题的支持，以及对一些初始填充的可选主体类。我们建议您尽可能将offcanvas头包含在dismise操作中，或者提供显式dismise操作。

Offcanvas
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. 
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel" data-bs-backdrop="false" data-bs-scroll="true">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
</div>
</div>

实例演示

使用下面的按钮可以通过JavaScript显示和隐藏offcanvas元素，JavaScript将元素上的.show类与.offcanvas类切换。

  • .offcanvas 隐藏内容（默认）
  • .offcanvas.show 显示内容

可以使用带有href属性的链接，也可以使用带有data-bs-target属性的按钮。在这两种情况下，都需要数据data-bs-toggle="offcanvas"。

Link with href
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. 
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
  Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  <li><a class="dropdown-item" href="#">Action</a></li>
  <li><a class="dropdown-item" href="#">Another action</a></li>
  <li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>

定位

这里没有offcanvas组件的默认位置，因此必须添加下面的一个修饰符类；

  • .offcanvas-start 放置在视口左侧（如上所示）
  • .offcanvas-end 放置在视口的右侧
  • .offcanvas-bottom 放置在视口的底部

试试下面右边和下面的例子。

Offcanvas right
... 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Offcanvas bottom
... 
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
...
</div>
</div>

背景

当 offcanvas及其背景可见时，将禁用滚动元素。使用data-bs-scroll属性切换body滚动，使用data-bs-backdrop切换背景。

Colored with scrolling

Try scrolling the rest of the page to see this option in action.

Offcanvas with backdrop

.....

Backdroped with scrolling

Try scrolling the rest of the page to see this option in action.

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>.....</p>
</div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Try scrolling the rest of the page to see this option in action.</p>
</div>
</div>

可达性

由于offcanvas面板在概念上是一个模态对话框，请确保添加aria labelledby=“…”-引用offcanvas标题到.offcanvas。注意，您不需要添加role=“dialog”，因为我们已经通过JavaScript添加了它。

Sass

Variables

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-body-backdrop-color:     rgba($modal-backdrop-bg, $modal-backdrop-opacity);
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;

用法

offcanvas插件利用几个类和属性来处理繁重的工作：

  • .offcanvas 隐藏内容
  • .offcanvas.show 显示内容
  • .offcanvas-start offcanvas隐藏到左侧
  • .offcanvas-end 隐藏到右侧
  • .offcanvas-bottom 隐藏到底部

添加一个带有data-bs-dismiss="offcanvas" 属性的dismise按钮，该属性触发JavaScript功能。一定要使用button元素在所有设备上进行正确的操作。 Add a dismiss button with the attribute, which triggers the JavaScript functionality. Be sure to use the <button> element with it for proper behavior across all devices.

通过数据属性

向元素添加data-bs-toggle="offcanvas"和data-bs-target or href，以自动分配对一个offcanvas元素的控制。data-bs-target属性接受CSS选择器来应用offcanvas。确保将类offcanvas添加到offcanvas元素。如果希望它默认打开，请添加额外的show类。

通过JavaScript

手动启用：

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})

选项

选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名称附加到data- bs-，如data-bs-backdrop=""。

Name Type Default Description
backdrop boolean true 当offcanvas打开时在主体上应用背景
keyboard boolean true 按escape键时关闭offcanvas
scroll boolean false 允许在offcanvas打开时滚动正文

方法

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

将内容激活为 offcanvas。接受可选选项对象。

可以使用构造函数创建offcanvas实例，例如：

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Method Description
toggle 将offcanvas元素切换为“显示”或“隐藏”。在实际显示或隐藏offcanvas元素之前（即在发生show.bs.offcanvas或hidden.bs.offcanvas事件之前）返回调用方。
show 显示offcanvas元素。在实际显示offcanvas元素之前（即，在show.bs.offcanvas事件发生之前）返回调用方。
hide 隐藏offcanvas元素。在offcanvas元素实际隐藏之前（即在hidden.bs.offcanvas事件发生之前）返回给调用方。
_getInstance 静态方法，它允许您获取与DOM元素关联的offcanvas实例

事件

Bootstrap的offcanvas类公开了一些事件，用于连接到offcanvas功能。

Event type Description
show.bs.offcanvas 调用show instance方法时，此事件立即激发。
shown.bs.offcanvas 当offcanvas元素对用户可见时（将等待CSS转换完成），将触发此事件。
hide.bs.offcanvas 调用hide方法后，会立即激发他的事件。
hidden.bs.offcanvas 当对用户隐藏offcanvas元素时（将等待CSS转换完成），将触发此事件。 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})
返回顶部