滑動導航（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...
})