オフキャンバス

いくつかのクラスと JavaScript プラグインを使用して、ナビゲーション、ショッピングカートなどの非表示のサイドバーをプロジェクトに組み込みます。

このページでは

使い方

Offcanvas は、ビューポートの左端、右端、上端、または下端から表示されるように JavaScript を介して切り替えることができるサイドバーコンポーネントです。ボタンまたはアンカーは、トグルする特定の要素に関連付けられたトリガーとして使用され、data属性は JavaScript を呼び出すために使用されます。

Offcanvas はモーダルと同じ JavaScript コードの一部を共有しています。概念的には非常に似ていますが、別々のプラグインです。
同様に、offcanvas のスタイルと寸法の一部のソース Sass変数は、モーダルの変数から継承されます。
表示されると、offcanvas にはデフォルトの背景が含まれており、クリックすると offcanvas を非表示にできます。
モーダルと同様に、一度に表示できるオフキャンバスは 1 つだけです。

注意喚起！CSS がアニメーションを処理する方法を考えると、要素に対してmarginorを使用することはできません。代わりに、クラスを独立したラッピング要素として使用してください。translate.offcanvas

このコンポーネントのアニメーション効果は、 prefers-reduced-motionメディアクエリに依存します。アクセシビリティドキュメントの縮小モーションセクションを参照してください。

例

オフキャンバスコンポーネント

.show以下は、デフォルトで ( on 経由で)表示される offcanvas の例です.offcanvas。Offcanvas には、閉じるボタンのあるヘッダーと、いくつかの initial のオプションのボディクラスのサポートが含まれていますpadding。可能な限り却下アクションを含むオフキャンバスヘッダーを含めるか、明示的な却下アクションを提供することをお勧めします。

offcanvas のコンテンツはここにあります。ここには、ほぼすべての Bootstrap コンポーネントまたはカスタム要素を配置できます。

html

<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close" 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>

ライブデモ

.show以下のボタンを使用して、クラスを持つ要素のクラスを切り替える JavaScript を介して offcanvas 要素を表示および非表示にします.offcanvas。

.offcanvasコンテンツを非表示にします (デフォルト)
.offcanvas.showコンテンツを表示

属性を持つリンクhref、または属性を持つボタンを使用できdata-bs-targetます。どちらの場合も、data-bs-toggle="offcanvas"が必要です。

href とのリンク

プレースホルダーとしてのテキスト。実生活では、選択した要素を持つことができます。いいね、テキスト、画像、リストなど。

html

<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

ボディスクロール

<body>offcanvas とその背景が表示されている場合、要素のスクロールは無効になります。属性を使用してスクロールdata-bs-scrollを有効にします。<body>

ページの残りの部分をスクロールして、このオプションの動作を確認してください。

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

ボディスクロールと背景

<body>背景を表示してスクロールを有効にすることもできます。

ページの残りの部分をスクロールして、このオプションの動作を確認してください。

html

<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" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
    <button type="button" class="btn-close" 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>

静的な背景

背景が静的に設定されている場合、オフキャンバスの外側をクリックしてもオフキャンバスは閉じません。

外側をクリックしても閉じません。

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

暗いオフキャンバス

v5.2.0 で追加

ユーティリティを使用してオフキャンバスの外観を変更し、ダークナビゲーションバーなどのさまざまなコンテキストにより適したものにします。ここでは、暗いオフキャンバスを適切にスタイリングするためにとを追加.text-bg-darkします。内にドロップダウンがある場合は、への追加も検討してください。.offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

ここにオフキャンバスコンテンツを配置します。

html

<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

レスポンシブ

v5.2.0 で追加

レスポンシブオフキャンバスクラスは、指定されたブレークポイント以降のビューポートの外側のコンテンツを非表示にします。そのブレークポイントを超えると、その中のコンテンツは通常どおりに動作します。たとえば、ブレークポイント.offcanvas-lgより下のオフキャンバスのコンテンツを非表示にしますlgが、ブレークポイントより上のコンテンツは表示しlgます。

ブラウザーのサイズを変更して、レスポンシブな offcanvas トグルを表示します。

これは内のコンテンツです.offcanvas-lg。

html

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

レスポンシブオフキャンバスクラスは、各ブレークポイントで使用できます。

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

配置

offcanvas コンポーネントにはデフォルトの配置がないため、以下の修飾子クラスのいずれかを追加する必要があります。

.offcanvas-startビューポートの左側に offcanvas を配置します (上図)。
.offcanvas-endビューポートの右側に offcanvas を配置します
.offcanvas-topビューポートの上部に offcanvas を配置します
.offcanvas-bottomビューポートの下部に offcanvas を配置します

以下の上、右、下の例を試してください。

...

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html

<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html

<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

アクセシビリティ

offcanvas パネルは概念的にはモーダルダイアログであるためaria-labelledby="..."、offcanvas のタイトルを参照して、必ずに追加して.offcanvasください。role="dialog"JavaScript を使用して既に追加しているため、追加する必要はありません。

CSS

変数

v5.2.0 で追加

Bootstrap の進化する CSS 変数アプローチの一環として、offcanvas はローカル CSS 変数を使用し.offcanvasてリアルタイムのカスタマイズを強化するようになりました。CSS 変数の値は Sass を介して設定されるため、Sass のカスタマイズも引き続きサポートされます。

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

サス変数

$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-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

使用法

offcanvas プラグインは、いくつかのクラスと属性を使用して重い作業を処理します。

.offcanvasコンテンツを非表示にします
.offcanvas.show内容を示します
.offcanvas-start左側のオフキャンバスを非表示にします
.offcanvas-end右側のオフキャンバスを非表示にします
.offcanvas-top上部のオフキャンバスを非表示にします
.offcanvas-bottom下部のオフキャンバスを非表示にします

data-bs-dismiss="offcanvas"JavaScript 機能をトリガーする属性を使用して閉じるボタンを追加します。<button>すべてのデバイスで適切に動作するように、要素を一緒に使用してください。

データ属性経由

トグル

1 つの offcanvas 要素の制御を自動的に割り当てるには、要素にdata-bs-toggle="offcanvas"anddata-bs-targetまたはまたはを追加します。hrefこのdata-bs-target属性は、offcanvas を適用する CSS セレクターを受け入れます。offcanvas必ずoffcanvas 要素にクラスを追加してください。デフォルトで開くようにしたい場合は、追加の class を追加しますshow。

解散

以下に示すように、オフキャンバス内のdataボタンの属性を使用して、却下を実現できます。

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

または、以下に示すようにを使用して offcanvas の外側のdata-bs-targetボタンに:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>

オフキャンバスを非表示にする両方の方法がサポートされていますが、オフキャンバスの外部から非表示にすることは、 ARIA オーサリングプラクティスガイドダイアログ (モーダル) パターンと一致しないことに注意してください。これは自己責任で行ってください。

JavaScript 経由

次を使用して手動で有効にします。

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

オプション

オプションはデータ属性または JavaScript を介して渡すことができるためdata-bs-、のようにオプション名をに追加できますdata-bs-animation="{value}"。データ属性を介してオプションを渡すときは、オプション名のケースタイプを「camelCase」から「kebab-case 」に変更してください。たとえば、data-bs-custom-class="beautifier"の代わりにを使用しdata-bs-customClass="beautifier"ます。

Bootstrap 5.2.0 の時点で、すべてのコンポーネントは、単純なコンポーネント構成を JSON 文字列として格納できる実験的な予約済みデータ属性をサポートしています。data-bs-config要素にdata-bs-config='{"delay":0, "title":123}'とdata-bs-title="456"属性がある場合、最終的なtitle値はに456なり、個別のデータ属性がで指定された値をオーバーライドしますdata-bs-config。さらに、既存のデータ属性は、のような JSON 値を格納できますdata-bs-delay='{"show":0,"hide":150}'。

名前	タイプ	デフォルト	説明
`backdrop`	ブール値または文字列`static`	`true`	offcanvas が開いている間に、body に背景を適用します。`static`または、クリックしたときにオフキャンバスを閉じない背景を指定します。
`keyboard`	ブール値	`true`	エスケープキーが押されたときにオフキャンバスを閉じます。
`scroll`	ブール値	`false`	offcanvas が開いている間、本文のスクロールを許可します。

メソッド

非同期メソッドと遷移

すべての API メソッドは非同期であり、遷移を開始します。トランジションが開始されるとすぐに呼び出し元に戻りますが、トランジションが終了する前に戻ります。さらに、遷移中のコンポーネントでのメソッド呼び出しは無視されます。

詳細については、JavaScript のドキュメントを参照してください。

コンテンツを offcanvas 要素としてアクティブにします。オプションのオプションを受け入れますobject。

コンストラクターを使用して offcanvas インスタンスを作成できます。次に例を示します。

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

方法	説明
`getInstance`	DOM 要素に関連付けられた offcanvas インスタンスを取得できる静的メソッド。
`getOrCreateInstance`	DOM 要素に関連付けられた offcanvas インスタンスを取得したり、初期化されていない場合に新しいインスタンスを作成したりできる静的メソッド。
`hide`	offcanvas 要素を非表示にします。offcanvas 要素が実際に非表示になる前 (つまり、`hidden.bs.offcanvas`イベントが発生する前) に呼び出し元に戻ります。
`show`	offcanvas 要素を表示します。offcanvas 要素が実際に表示される前 (つまり、`shown.bs.offcanvas`イベントが発生する前) に呼び出し元に戻ります。
`toggle`	offcanvas 要素の表示または非表示を切り替えます。offcanvas 要素が実際に表示または非表示になる前 (つまり、`shown.bs.offcanvas`or`hidden.bs.offcanvas`イベントが発生する前) に呼び出し元に戻ります。

イベント

Bootstrap の offcanvas クラスは、offcanvas 機能にフックするためのいくつかのイベントを公開します。

イベントタイプ	説明
`hide.bs.offcanvas`	`hide`このイベントは、メソッドが呼び出されるとすぐに発生します。
`hidden.bs.offcanvas`	このイベントは、offcanvas 要素がユーザーから隠されているときに発生します (CSS トランジションが完了するのを待ちます)。
`hidePrevented.bs.offcanvas`	このイベントは、offcanvas が表示され、その背景が表示され、`static`offcanvas の外側でクリックが実行されたときに発生します。このイベントは、エスケープキーが押され、`keyboard`オプションがに設定されている場合にも発生します`false`。
`show.bs.offcanvas`	`show`このイベントは、インスタンスメソッドが呼び出されるとすぐに発生します。
`shown.bs.offcanvas`	このイベントは、offcanvas 要素がユーザーに表示されるようになったときに発生します (CSS トランジションが完了するのを待ちます)。

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

オフキャンバス

使い方

例

オフキャンバスコンポーネント

オフキャンバス

ライブデモ

オフキャンバス

ボディスクロール

ボディスクロールによるオフキャンバス

ボディスクロールと背景

スクロールする背景

静的な背景

オフキャンバス

暗いオフキャンバス

オフキャンバス

レスポンシブ

レスポンシブなオフキャンバス

配置

オフキャンバストップ

オフキャンバス右

オフキャンバスボトム

アクセシビリティ

CSS

変数

サス変数

使用法

データ属性経由

トグル

解散

JavaScript 経由

オプション

メソッド

非同期メソッドと遷移

イベント

オフキャンバス

使い方

例

オフキャンバス コンポーネント

オフキャンバス

ライブデモ

オフキャンバス

ボディスクロール

ボディスクロールによるオフキャンバス

ボディスクロールと背景

スクロールする背景

静的な背景

オフキャンバス

暗いオフキャンバス

オフキャンバス

レスポンシブ

レスポンシブなオフキャンバス

配置

オフキャンバストップ

オフキャンバス右

オフキャンバスボトム

アクセシビリティ

CSS

変数

サス変数

使用法

データ属性経由

トグル

解散

JavaScript 経由

オプション

メソッド

非同期メソッドと遷移

イベント

オフキャンバスコンポーネント