概觀
你可以在 <b-sidebar> 設定範圍預設插槽區塊（選用） 內放入任何內容，例如文字、按鈕、表格、圖片，或 垂直導覽。
元件支援標頭和內建的關閉按鈕，你可以選擇性地停用它，以及提供你自己的標頭（如有需要），而且可以使用我們的 v-b-toggle 指令 輕鬆切換。
元件擁有最少的預設樣式化設定，如此一來，你可以靈活運用側邊欄的內容配置。
<template>
<div>
<b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
<b-sidebar id="sidebar-1" title="Sidebar" shadow>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
</div>
</b-sidebar>
</div>
</template>
如果內容高度高於可用視窗高度，會於側邊欄主體上自動透過 CSS 啟用垂直捲動。
樣式化設定
我們提供多個屬性，讓你控制側邊欄的外觀。
標題
側邊欄應具備標題（特別是基於無障礙考量）。你可以透過 title 屬性或 title 插槽來輕鬆設定顯示於標頭的標題。請注意 title 插槽優先於 title 屬性設定。
如果設定了 no-header prop，則 title prop 或 title slot 都沒有任何作用。
如果您未提供標題，請使用 aria-label 或 aria-labelledby props 提供側邊欄的無障礙標題。在下方 無障礙區塊 查看更多詳細資訊。
放置
預設情況下，側欄將放置在可視區域的左側。將 right prop 設定為 true 來讓側邊欄顯示在可視區域的右側。
<template>
<div>
<b-button v-b-toggle.sidebar-right>Toggle Sidebar</b-button>
<b-sidebar id="sidebar-right" title="Sidebar" right shadow>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
</div>
</b-sidebar>
</div>
</template>
變體
使用 props bg-variant 和 text-variant 分別控制背景和文字的主題顏色變體。或者，您可以套用樣式或類別來指定背景和文字顏色。
<template>
<div>
<b-button v-b-toggle.sidebar-variant>Toggle Sidebar</b-button>
<b-sidebar id="sidebar-variant" title="Sidebar" bg-variant="dark" text-variant="light" shadow>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
</div>
</b-sidebar>
</div>
</template>
標準 Bootstrap 主題變體為 'white'、'light'、'dark'、'primary'、'secondary'、'success'、'danger'、'warning' 和 'info'。
預設背景變體為 'light'，預設文字變體為 'dark'。
陰影
偏好有背景陰影的側邊欄嗎？將 shadow prop 設定為布林值的 true 以獲得中等陰影，'sm' 以獲得小陰影，或 'lg' 以獲得較大的陰影。將它設定為 false（預設值）表示沒有陰影。
邊框
預設情況下，<b-sidebar> 沒有邊框。使用 邊框實用程式類別 將邊框加入 <b-sidebar> （透過 sidebar-class prop 2.12.0+），或使用 CSS 樣式覆寫。
<template>
<div>
<b-button v-b-toggle.sidebar-border>Toggle Sidebar</b-button>
<b-sidebar id="sidebar-border" sidebar-class="border-right border-danger">
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
</div>
</b-sidebar>
</div>
</template>
寬度
預設情況下，<b-sidebar> 的寬度設定為 320px（在 'xs' 螢幕上為 100%）。只需透過 width prop 提供一個值（例如 '180px'、'20em' 等）即可覆寫此預設值。最大寬度透過 CSS 設定為 100%。
內距
預設情況下，側邊欄沒有內距。您可以將內距實用程式類別套用至元件，或將外邊距/內距實用程式類別套用至側邊欄的內容。
停用滑動過渡
預設情況下，側邊欄在顯示和隱藏時將使用滑動過渡。您可以透過 no-slide prop 停用滑動過渡。
注意：BootstrapVue 定義的此元件過渡效果取決於 prefers-reduced-motion 媒體查詢。查看 無障礙說明的減少移動部分 以取得更多詳細資訊。
當停用滑動過渡時，選用背景 的淡入淡出過渡也會被停用。
z-index
側邊欄預設在 SCSS/CSS 中定義了`z-index，但在某些狀況下，可能需要使用不同的`z-index，才能確保側邊欄出現在其他內容上方或下方。你可以透過 CSS 樣式或 z-index 來執行此操作。
作用域預設區塊
default 區塊讓你得以提供側邊欄主體內容。此內容可以選擇作用域。以下各節中的範例展示如何使用預設區塊作用域
你可以透過 body-class 來套用任意的類別至主體部分。
預設情況下，`<b-sidebar>` 有個標頭，包含選填標題和關閉按鈕。你可以透過 `title`，或透過選擇作用域的區塊`title` 來提供標題。
若要提供自訂標頭，你可以使用選擇作用域的 `header 區塊。
你可以透過 header-class 來套用任意的類別至標頭部分，以覆寫預設內距等。
你可以透過`no-header` 來停用預設標頭（包含關閉按鈕）。請注意，你必須提供關閉側邊欄的方法。`default` 區塊具有作用域，包括用於關閉側邊欄的 `hide() 方法。
<template>
<div>
<b-button v-b-toggle.sidebar-no-header>Toggle Sidebar</b-button>
<b-sidebar id="sidebar-no-header" aria-labelledby="sidebar-no-header-title" no-header shadow>
<template #default="{ hide }">
<div class="p-3">
<h4 id="sidebar-no-header-title">Custom header sidebar</h4>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<nav class="mb-3">
<b-nav vertical>
<b-nav-item active @click="hide">Active</b-nav-item>
<b-nav-item href="#link-1" @click="hide">Link</b-nav-item>
<b-nav-item href="#link-2" @click="hide">Another Link</b-nav-item>
</b-nav>
</nav>
<b-button variant="primary" block @click="hide">Close Sidebar</b-button>
</div>
</template>
</b-sidebar>
</div>
</template>
<b-sidebar> 提供`footer 區塊（可以選擇作用域），讓你得以提供出現在側邊欄底部的內容。`footer 區塊具有作用域，包括用於關閉側邊欄的 `hide() 方法。
<template>
<div>
<b-button v-b-toggle.sidebar-footer>Toggle Sidebar</b-button>
<b-sidebar id="sidebar-footer" aria-label="Sidebar with custom footer" no-header shadow>
<template #footer="{ hide }">
<div class="d-flex bg-dark text-light align-items-center px-3 py-2">
<strong class="mr-auto">Footer</strong>
<b-button size="sm" @click="hide">Close</b-button>
</div>
</template>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
</div>
</b-sidebar>
</div>
</template>
你可以透過 `footer-class` 來套用任意的類別至頁腳部分。
延遲渲染
在某些情況下，當側邊欄不可見時，你可能不想渲染內容。只需設定`<b-sidebar>` 的 `lazy` 屬性即可。當 lazy 為 true，主體和選填頁腳會在側邊欄關閉時不會渲染（從 DOM 中移除）。
背景
2.12.0+
當側邊欄開啟時，透過 `backdrop` 來加入基本背景。當設定為 true，側邊欄會顯示不透明背景。點擊背景會關閉側邊欄，除非 `no-close-on-backdrop` 屬性設定為 true。
你也可以選擇使用 backdrop-variant 屬性（自 BootstrapVue v2.15.0+ 起），來控制背景的主題色變式。預設背景變式為 dark。
<template>
<div>
<b-button v-b-toggle.sidebar-backdrop>Toggle Sidebar</b-button>
<b-sidebar
id="sidebar-backdrop"
title="Sidebar with backdrop"
:backdrop-variant="variant"
backdrop
shadow
>
<div class="px-3 py-2">
<b-form-group label="Backdrop variant" label-for="backdrop-variant">
<b-form-select id="backdrop-variant" v-model="variant" :options="variants"></b-form-select>
</b-form-group>
</div>
</b-sidebar>
</div>
</template>
<script>
export default {
data() {
return {
variant: 'dark',
variants: [
'transparent',
'white',
'light',
'dark',
'primary',
'secondary',
'success',
'danger',
'warning',
'info',
]
}
}
}
</script>
請注意，當側邊欄開啟時，仍然可以捲動主體（與對話視窗的行為不同）。啟用背景時，焦點限制會嘗試將焦點維持在側邊欄內。請注意，在極少數的情況下，使用者可能會將焦點移至側邊欄外的元素。
顯示控制
v-b-toggle 指令
當開啟側邊欄時，使用 v-b-toggle 指令 是首選方法，因為它會自動處理觸發元件的 aria-controls 與 aria-expanded 可協助存取的屬性。
本頁大部分的範例都使用了 v-b-toggle 指令。
v-model
v-model 反應側邊欄目前的可見狀態。雖然它可用於控制側邊欄的可見狀態，但建議使用 v-b-toggle 指令 來顯示側邊欄，以符合可協助存取的原因。如果您使用 v-model 來顯示側邊欄，您應將 aria-controls="id" 屬性（其中 id 是側邊欄的 ID）置於觸發元件上，並將 aria-expanded 屬性（也在觸發元件上）設定為字串 'true'（如果側邊欄是開啟的）或 'false'（如果側邊欄是關閉的）。
v-model 內部繫結至 visible 屬性，而且 change 事件會更新 v-model。
在變更 $route 時關閉
預設會讓 <b-sidebar> 在變更 $route（包含查詢和雜湊的完整路徑）時自動關閉。如果側邊欄置於 <router-view> 之外並用於導航，這種方式特別方便。
您可以透過將 no-close-on-route-change 屬性設定為 true 來停用此行為。
事件
在側邊欄開啟時，側邊欄會發出 shown 事件，而且在側邊欄關閉時會發出 hidden 事件。
change 事件用於更新 v-model，而且在側邊欄的可見狀態變更時會發出。
可協助存取
<b-sidebar> 提供多項可協助存取功能。
在側邊欄開啟時，整個側邊欄將獲得焦點，這對於螢幕閱讀器和僅使用鍵盤的使用者十分有利。在側邊欄關閉時，會重新將焦點移至在側邊欄開啟前原先擁有焦點的元素。
在某些情況下，您可能需要完全停用強制焦點功能。您可以透過設定屬性 no-enforce-focus 來執行此操作，儘管通常出於可協助存取的原因而不鼓勵這麼做。
在側邊欄開啟時，使用者可以按 Esc 來關閉側邊欄。若要停用此功能，請將 no-close-on-esc 屬性設定為 true。在啟用背景時，您可以使用屬性 no-close-on-backdrop 來停用背景點擊時關閉的功能。
當 backdrop 屬性為 true 時，側邊欄將嘗試限制焦點在側邊欄內，而且側邊欄將設定屬性 aria-modal="true"。
在您隱藏標題或側邊欄沒有標題時，將不是設定 aria-label 為描述側邊欄的字串，就是將 aria-labelledby 設定為包含標題的元素 ID。在您使用 lazy 屬性且沒有標題時，請使用 aria-label 屬性來提供一個適當的字串標籤側邊欄。
實現說明
BootstrapVue 客製化 SCSS/CSS 需要的風格正常顯示和擺放側邊欄。
Bootstrap v4 背景 ('bg-*') 和文字 ('text-*') 實用程式類別分別用於控制背景和字型顏色。
<b-sidebar> 中一些預設的樣式可透過使用 SASS 變數來自訂。請參閱 主題文件 以了解更多詳細資料。
另請參閱