概要
<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プロパティが設定されている場合、titleプロパティとtitleスロットのどちらも効果がありません。
タイトルを指定しない場合は、aria-labelプロパティまたはaria-labelledbyプロパティを使用して、サイドバーのアクセシブルなタイトルを提供してください。詳細については、下記のアクセシビリティセクションを参照してください。
配置
デフォルトでは、サイドバーはビューポートの左側に配置されます。rightプロパティを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>
バリアント
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プロパティを、中程度の影の場合はブール値true、小さな影の場合は'sm'、大きな影の場合は'lg'に設定します。影を付けない場合はfalse（デフォルト）に設定します。
ボーダー
デフォルトでは、<b-sidebar>にはボーダーがありません。ボーダーユーティリティクラスを使用して、<b-sidebar>にボーダーを追加するか（sidebar-classプロパティを使用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プロパティ（例：'180px'、'20em'など）を使用して値を指定すると、このデフォルト値を上書きできます。最大幅はCSSで100%に設定されています。
パディング
サイドバーはデフォルトではパディングがありません。コンポーネントにパディングユーティリティクラス、またはサイドバーのコンテンツにマージン/パディングユーティリティクラスを適用できます。
スライドトランジションの無効化
デフォルトでは、サイドバーは表示と非表示時にスライドトランジションを使用します。no-slideプロパティを使用して、スライドトランジションを無効化できます。
注：このコンポーネントの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に設定されていない限り、バックドロップをクリックするとサイドバーが閉じます。
オプションとして（BootstrapVue v2.15.0以降）、backdrop-variant プロパティを使用してバックドロップのテーマカラーバリアントを制御できます。デフォルトのバックドロップバリアントは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変数を使用してカスタマイズできます。詳細については、テーマ設定に関するドキュメントを参照してください。
関連項目