オフキャンバス

Offcanvas

いくつかのクラスとJavaScriptプラグインを使って、ナビゲーションやショッピングカートなどのための隠しサイドバーをプロジェクトに組み込むことができます。

項目

基礎知識

オフキャンバスは、JavaScriptによって切り替え可能で、ビューポートの左端、右端、または下端から表示できるサイドバーコンポーネントです。ボタンまたはアンカーは、切り替えた特定の要素にアタッチされるトリガーとして使用され、data属性はJavaScriptを呼び出すために使用されます。

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

Heads up! CSSによるアニメーションの処理方法を考慮すると、.offcanvas要素に対してmarginやtranslateを使用することはできません。代わりに、このクラスを独立したラッピング要素として使用してください。

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

例

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

以下は, デフォルトで表示される(.showon.offcanvasによる)オフキャンバスの例です。オフキャンバスには、閉じるボタン付きのヘッダと、初期のpaddingのためのオプションのボディクラスがサポートされています。可能な限り, オフキャンバスのヘッダにdismissアクションを含めるか、明示的なdismissアクションを提供することをお勧めします。

Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

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>

ライブデモ

.offcanvasクラスを持つ要素の.showクラスをトグルするJavaScriptで、オフキャンバス要素の表示/非表示を切り替えるには、以下のボタンを使用します。

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

href属性でリンクを,data-bs-target属性でボタンを使うことができます。いずれの場合も、data-bs-toggle="offcanvas"が必要です。

Link with href

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

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のスクロール

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

Try scrolling the rest of the page to see this option in action.

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のスクロールと背景

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

Try scrolling the rest of the page to see this option in action.

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>

静的な背景

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

I will not close if you click outside of me.

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>

ダークオフキャンバス

Deprecated in v5.3.0 Added in v5.2.0

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

気をつけてください! コンポーネントのダークバリアントはv5.3.0でカラーモードの導入とともに非推奨となりました。上記のクラスを手動で追加する代わりに、ルート要素、親ラッパー、またはコンポーネント自体にdata-bs-theme="dark"を設定してください。

Place offcanvas content here.

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>

レスポンシブ

Added in v5.2.0

レスポンシブ・オフキャンバスクラスは、指定されたブレークポイントから下のビューポート外のコンテンツを非表示にします。そのブレークポイントより上では、コンテンツは通常通りに動作します。例えば、.offcanvas-lgは、lgブレイクポイントより下のオフキャンバス内のコンテンツを隠しますが、lgブレイクポイントより上のコンテンツは表示します。

Resize your browser to show the responsive offcanvas toggle.

This is content within an .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-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="..."と, オフキャンバスのタイトルを参照する記述を追加してください。なお、role="dialog"はすでにJavaScriptで追加されているので、追加する必要はありません。

CSS

変数

Added in v5.2.0

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

scss/_offcanvas.scss

--#{$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};
--#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
--#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};

Sass変数

scss/_variables.scss

$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:                var(--#{$prefix}body-bg);
$offcanvas-color:                   var(--#{$prefix}body-color);
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

使い方

オフキャンバス・プラグインでは、いくつかのクラスと属性を利用して作業を行います

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

解除ボタンをdata-bs-disiss="offcanvas"属性で追加すると、JavaScriptの機能が起動します。すべてのデバイスで適切な動作をするために、必ず<button>要素を一緒に使用してください。

データ属性

トグル

要素にdata-bs-toggle="offcanvas"とdata-bs-targetまたはhrefを追加すると、1つのoffcanvas要素の制御を自動的に割り当てることができます。data-bs-target属性には、オフキャンバスを適用するためのCSSセレクタを指定します。オフキャンバス要素には、必ずクラスoffcanvasを追加してください。デフォルトで開いた状態にしたい場合は、クラスshowを追加します。

解除

以下に示すようにdata-bs-dismiss属性を使って、offcanvas内のボタンで終了させることができます：

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

または、以下のようにdata-bs-targetを使ってoffcanvasの外側のボタンに追加します：

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

オフキャンバスを解除する方法はどちらもサポートされていますが、オフキャンバスの外側から解除することはARIA Authoring Practices Guide dialog (modal) patternに一致しないことに注意してください。これは自己責任で行ってください。

Via JavaScript

手動で有効にする場合

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

オプション

オプションはデータ属性やJavaScriptで渡すことができるので、data-bs-animation="{value}"のように、data-bs-にオプション名を付加することができる。データ属性でオプションを渡す場合は、オプション名の大文字と小文字を"camelCase“から”kebab-case“に変更することを忘れないようにしましょう。例えば、data-bs-customClass="beautifier"の代わりに data-bs-custom-class="beautifier"を使用します。

Bootstrap 5.2.0では、全てのコンポーネントが 実験的 予約データ属性 data-bs-config をサポートしており、JSON文字列として簡単なコンポーネント設定を収容することができます。要素に data-bs-config='{"delay":0, "title":123}'とdata-bs-title="456"属性がある場合、 titleの最終値は 456で、別々のデータ属性は data-bs-configで与えられた値を上書きする。また、既存のデータ属性にはdata-bs-delay='{"show":0, "hide":150}'のようなJSON値を格納することができるようになっています。

最終的なコンフィギュレーションオブジェクトは data-bs-config、data-bs-、js objectのマージ結果であり、最新のキー値が他の値を上書きする。

Name	Type	Default	Description
`backdrop`	boolean or the string`static`	`true`	オフキャンバスが開いている間、ボディに背景を適用します。また、`static`を指定すると、クリックしてもオフキャンバスを閉じない背景を適用することができます。
`keyboard`	boolean	`true`	escape keyが押されたときにOffcanvasを閉じます。
`scroll`	boolean	`false`	Offcanvasが開いている間にbodyをスクロール可能にします。

Methods

すべてのAPIメソッドは非同期でトランジションを開始します。 トランジションが開始されるとすぐに、しかし終了する前に、呼び出し元に戻ります。また、遷移中のコンポーネントに対するメソッド呼び出しは無視されます。詳しくはJavaScriptのドキュメントをご覧ください

コンテンツをオフキャンバス要素としてアクティブ化します。オプションobjectを受け入れます。

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

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

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

イベント

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

Event type	Description
`hide.bs.offcanvas`	このイベントは、`hide`メソッドが呼び出された直後に発生します。
`hidden.bs.offcanvas`	このイベントは、offcanvas要素がユーザーから隠されたときに発生します（CSSトランジションが完了するまで待ちます）。
`hidePrevented.bs.offcanvas`	このイベントは、オフキャンバスが表示され、そのバックドロップが`static`で、オフキャンバスの外側をクリックしたときに発生します。このイベントは、エスケープキーが押され、`keyboard`オプションが`false`に設定されたときにも発生します。
`show.bs.offcanvas`	このイベントは、`show`インスタンスメソッドが呼び出されるとすぐに発生します。
`shown.bs.offcanvas`	このイベントは、offcanvas要素がユーザに見えるようになったときに発生します（CSSトランジションが完了するまで待ちます）。

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