滑動導(dǎo)航（Offcanvas）
使用一些類和我們的JavaScript插件在項目中構(gòu)建隱藏的側(cè)邊欄，用于導(dǎo)航、購物車等。
On this page
工作原理
Offcanvas是一個側(cè)邊欄組件，可以通過JavaScript進行切換，從視口的左、右或下邊緣顯示。按鈕或錨點用作觸發(fā)器，附加到您切換的特定元素，數(shù)據(jù)屬性用于調(diào)用我們的JavaScript。
- Offcanvas與modals共享一些相同的JavaScript代碼。從概念上講，它們非常相似，但它們是獨立的插件。
- 類似地，offcanvas的樣式和維度的一些源Sass變量是從modal的變量繼承的。
- 當(dāng)顯示時，Offcanvas包括一個默認(rèn)的背景，可以點擊隱藏隱藏的畫布。
- 與模態(tài)框類似，一次只能顯示一個offcanvas。
注意！ 考慮到CSS處理動畫的方式，您不能在.offcanvas元素上使用margin或translate。相反，將類用作獨立的包裝元素。
此組件的動畫效果取決于“首選簡化運動媒體”查詢。
示例
組件
下面是一個默認(rèn)顯示的offcanvas示例（via.show on.offcanvas）。Offcanvas包括對帶有關(guān)閉按鈕的標(biāo)題的支持，以及對一些初始填充的可選主體類。我們建議您盡可能將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隱藏內(nèi)容（默認(rèn)）.offcanvas.show顯示內(nèi)容
可以使用帶有href屬性的鏈接，也可以使用帶有data-bs-target屬性的按鈕。在這兩種情況下，都需要數(shù)據(jù)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組件的默認(rèn)位置，因此必須添加下面的一個修飾符類；
.offcanvas-start放置在視口左側(cè)（如上所示）.offcanvas-end放置在視口的右側(cè).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>背景
當(dāng) 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面板在概念上是一個模態(tài)對話框，請確保添加aria labelledby=“…”-引用offcanvas標(biāo)題到.offcanvas。注意，您不需要添加role=“dialog”，因為我們已經(jīng)通過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隱藏內(nèi)容.offcanvas.show顯示內(nèi)容.offcanvas-startoffcanvas隱藏到左側(cè).offcanvas-end隱藏到右側(cè).offcanvas-bottom隱藏到底部
添加一個帶有data-bs-dismiss="offcanvas" 屬性的dismise按鈕，該屬性觸發(fā)JavaScript功能。一定要使用button元素在所有設(shè)備上進行正確的操作。
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.
通過數(shù)據(jù)屬性
向元素添加data-bs-toggle="offcanvas"和data-bs-target or href，以自動分配對一個offcanvas元素的控制。data-bs-target屬性接受CSS選擇器來應(yīng)用offcanvas。確保將類offcanvas添加到offcanvas元素。如果希望它默認(rèn)打開，請?zhí)砑宇~外的show類。
通過JavaScript
手動啟用：
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
return new bootstrap.Offcanvas(offcanvasEl)
})
選項
選項可以通過數(shù)據(jù)屬性或JavaScript傳遞。對于數(shù)據(jù)屬性，將選項名稱附加到data- bs-，如data-bs-backdrop=""。
| Name | Type | Default | Description |
|---|---|---|---|
backdrop |
boolean | true |
當(dāng)offcanvas打開時在主體上應(yīng)用背景 |
keyboard |
boolean | true |
按escape鍵時關(guān)閉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.
將內(nèi)容激活為 offcanvas。接受可選選項對象。
可以使用構(gòu)造函數(shù)創(chuàng)建offcanvas實例，例如：
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
| Method | Description |
|---|---|
toggle |
將offcanvas元素切換為“顯示”或“隱藏”。在實際顯示或隱藏offcanvas元素之前（即在發(fā)生show.bs.offcanvas或hidden.bs.offcanvas事件之前）返回調(diào)用方。 |
show |
顯示offcanvas元素。在實際顯示offcanvas元素之前（即，在show.bs.offcanvas事件發(fā)生之前）返回調(diào)用方。 |
hide |
隱藏offcanvas元素。在offcanvas元素實際隱藏之前（即在hidden.bs.offcanvas事件發(fā)生之前）返回給調(diào)用方。 |
_getInstance |
靜態(tài)方法，它允許您獲取與DOM元素關(guān)聯(lián)的offcanvas實例 |
事件
Bootstrap的offcanvas類公開了一些事件，用于連接到offcanvas功能。
| Event type | Description |
|---|---|
show.bs.offcanvas |
調(diào)用show instance方法時，此事件立即激發(fā)。 |
shown.bs.offcanvas |
當(dāng)offcanvas元素對用戶可見時（將等待CSS轉(zhuǎn)換完成），將觸發(fā)此事件。 |
hide.bs.offcanvas |
調(diào)用hide方法后，會立即激發(fā)他的事件。 |
hidden.bs.offcanvas |
當(dāng)對用戶隱藏offcanvas元素時（將等待CSS轉(zhuǎn)換完成），將觸發(fā)此事件。 |
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
// do something...
})