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