滑动导航（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操作。

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

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 放置在视口的底部

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

...

<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>

...

<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切换背景。

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

.....

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...
        })