メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

オフキャンバス(Offcanvas) v5.0.0-beta3新設

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

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。

使い方(How it works)

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

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

注意喚起!CSSがアニメーションを処理する方法を考えると .offcanvas 要素に margintranslate は使用できない。代わりのクラスを独立したラッピング要素に使用して下さい。

実例(Examples)

オフキャンバスコンポーネント(Offcanvas components)

以下は、(.offcanvas.show を経由して)デフォルトで表示されるオフキャンバスの例。オフキャンバスには、閉じるボタンのあるヘッダと、初期 padding 用のオプションのボディクラスのサポートが含まれている。できる場合はいつでも、却下アクションを含むオフキャンバスヘッダを含めるか、明示的な却下アクションの提供を推奨。

見本 オフキャンバスを開いた状態で表示
オフキャンバス

これがオフキャンバスのコンテンツ。ここにほぼすべてのBootstrapコンポーネントやカスタム要素が配置できる。

※ココでは閉じるボタンを押しても閉じない仕様にしている。

設定例
<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">オフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    これがオフキャンバスのコンテンツ。ここにほぼすべてのBootstrapコンポーネントやカスタム要素が配置できる。
  </div>
</div>

オフキャンバスの設定(Live demo)v5.2.0設定変更

以下のボタンをクリックすると、クラスを変更して他の要素を表示したり非表示にする:

  • .offcanvas は、コンテンツを非表示にする(デフォルト)
  • .offcanvas.show は、コンテンツを表示する

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

見本

オフキャンバス
プレースホルダとしてのテキスト。実生活では、選択した要素を持つことができます。いいね、テキスト、画像、リストなど。
Bootstrap5.2.0~の設定例 緑背景が5.2.0での変更箇所
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-expanded="false" aria-controls="offcanvasExample">
  href属性を持つリンク
</a>
<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-expanded="false" aria-controls="offcanvasExample">
  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">オフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>   
  </div>
  <div class="offcanvas-body">
    <div>
      プレースホルダとしてのテキスト。...
    </div>
    <div class="dropdown mt-3">
      <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        ドロップダウン
      </button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">メニュー1</a></li>
        <li><a class="dropdown-item" href="#">メニュー2</a></li>
        <li><a class="dropdown-item" href="#">メニュー3</a></li>
      </ul>
    </div>
  </div>
</div>
※Bootstrap5.1.3の設定例 赤背景が5.2.0での変更箇所
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  href属性を持つリンク
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  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">オフキャンバス</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      プレースホルダとしてのテキスト。...
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        ドロップダウン
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">メニュー1</a></li>
        <li><a class="dropdown-item" href="#">メニュー2</a></li>
        <li><a class="dropdown-item" href="#">メニュー3</a></li>
      </ul>
    </div>
  </div>
</div>
【設定】
  • button.btn《切替ボタン》 + 〔div.offcanvas.offcanvas-start > {div.offcanvas-header > h5.offcanvas-title《タイトル》 + button.btn-close[data-bs-dismiss="offcanvas"][aria-label="閉じる"]《閉じるアイコンボタン》}《ヘッダ》 + div.offcanvas-body《コンテンツ》〕《オフキャンバス部分》
  • オフキャンバスのプラグインを使用するため、
    • 切替ボタンには、[data-bs-toggle="offcanvas"](プラグインを有効にする)と、[data-bs-target="#オフキャンバスのID"][href="#オフキャンバスのID"]
    • div.offcanvas(ボタンのリンク先)には、id="ID名"tabindex="-1"Esc を押すとオフキャンバスが閉じるようにする)
    をそれぞれ入れること
アクセシビリティの設定】
  • h5.offcanvas-titleid="ID名" を入れ、div.offcanvasaria-labelledby="タイトルのID" 属性(タイトルをオフキャンバスのラベルとして関連付ける)を入れること
  • 切替ボタン部分には、
    • aria-expanded="false" 属性(支援技術に要素の開閉の状態を伝える)
    • aria-controls="コンテンツのID" 属性(リンクまたはボタンリンクまたはボタンとコンテンツの関連付け)
    • コントロールが a.btn の場合は、role="button"(支援技術にボタンの役割を伝える)
    を入れる
【変更履歴】
  • 【v5.2.0】
    • オフキャンバスを閉じるボタン:.btn-close.text-reset.btn-close
    • ドロップダウン:button.btn.dropdown-toggleid="ID"ul.dropdown-menuaria-labelledby="ID" 属性はそれぞれ不要に

body本体のスクロール(Body scrolling)v5.2.0「背景」から移動

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

見本
body本体がスクロールするオフキャンバス

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

設定例
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">bodyのスクロールが有効</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">body本体がスクロールするオフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    <p>...</p>
  </div>
</div>
【設定】
  • data-bs-scroll="true", data-bs-backdrop="false" 属性を .offcanvas に入れる
【変更履歴】
  • 【v5.2.0】
    • オフキャンバスを閉じるボタン:.btn-close.text-reset.btn-close

body本体のスクロールとオーバーレイ背景が両方とも有効(Body scrolling and backdrop)v5.2.0「背景」から移動

オーバーレイ背景が表示された状態での <body> のスクロールも有効にできる。

見本
スクロール可能なオーバーレイ背景

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

設定例
<button type="button" class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">スクロールとオーバーレイ背景が両方とも有効</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">スクロール可能なオーバーレイ背景</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    <p>...</p>
  </div>
</div>
【設定】
  • data-bs-scroll="true" 属性を .offcanvas に入れる
【変更履歴】
  • 【v5.2.0】
    • オフキャンバスを閉じるボタン:.btn-close.text-reset.btn-close

静的な背景(Static backdrop)v5.2.0新設

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

見本
オフキャンバス
オフキャンバスの外側の背景をクリックしてもオフキャンバスは閉じない。閉じるボタンを押すと閉じる。
設定例
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  静的なオフキャンバスに切替
</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">オフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      ...
    </div>
  </div>
</div>
【設定】
  • .offcanvas[data-bs-backdrop="static"] を追加
  • Esc を押しても閉じないようにするには、さらに [data-bs-keyboard="false"] を追加

Darkオフキャンバス(Dark offcanvas)v5.2.0新設

ユーティリティを使用してオフキャンバスの外観を変更し、Darkナビゲーションバーなどのさまざまな背景とよりよく一致させる。ここでは、.text-bg-dark.offcanvas に追加し、.btn-close-white.btn-close に追加して、Darkオフキャンバスとして適切なスタイルを設定する。ドロップダウンが含まれている場合は、.dropdown-menu-dark.dropdown-menu に追加する方法もあり。

見本 オフキャンバスを開いた状態で表示
オフキャンパス

これがオフキャンバスのコンテンツ。

※ココでは閉じるボタンを押しても閉じない仕様にしている。

設定例
<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">オフキャンパス</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    <p>これがオフキャンバスのコンテンツ。</p>
  </div>
</div>
【設定】
  • オフキャンバス:.offcanvas.text-bg-dark
  • 閉じるボタン:button.btn-close.btn-close-white

レスポンシブ(Responsive)v5.2.0新設

レスポンシブ・オフキャンバスクラスは、ビューポートの外側のコンテンツを指定されたブレークポイントから下では隠す。そのブレークポイントを超えると、その中のコンテンツは通常どおりに動作。例えば、.offcanvas-lg は、lg ブレークポイントより下のオフキャンバスのコンテンツを非表示(オフキャンバス切替ボタンを押すと表示)にするが、lg ブレークポイントより上のコンテンツは通常に表示する。

見本
ブラウザのサイズを変更して、レスポンシブなオフキャンバスの切替を表示させて下さい。
レスポンシブ・オフキャンバス

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

設定例
<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">オフキャンバスの切替</button>

<div class="alert alert-info d-none d-lg-block">ブラウザのサイズを変更して、レスポンシブなオフキャンバスの切替を表示させて下さい。</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">レスポンシブ・オフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">これは <code>.offcanvas-lg</code> 内のコンテンツ。</p>
  </div>
</div>

レスポンシブ・オフキャンバスクラスは、ブレークポイントごとに利用できる。

定義済クラスの種類
ブレークポイント クラス名 オフキャンバスになるビューポートの範囲
常時 .offcanvas すべて
小より下 .offcanvas-sm 576px以下
中より下 .offcanvas-md 768px以下
大より下 .offcanvas-lg 992px以下
特大より下 .offcanvas-xl 1200px以下
超特大より下 .offcanvas-xxl 1400px以下
【設定】
  • .offcanvas の代わりに .offcanvas-{breakpoint}(上記の「定義済クラスの種類」から選択)を入れる
    • {breakpoint}sm(小), md(中), lg(大), xl(特大), xxl(超特大)のいずれかを選択)は、グリッド・システムのビューポイントに準ずる
【注意】
  • 閉じるボタン button.btn-close[data-bs-dismiss="offcanvas"][aria-label="閉じる"][data-bs-target] を設定する必要あり

配置(Placement)v5.0.0一部追加

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

  • .offcanvas-start は、ビューポートの左側にオフキャンバスを配置
  • .offcanvas-end は、ビューポートの右側にオフキャンバスを配置
  • .offcanvas-top は、ビューポートの上側にオフキャンバスを配置
  • .offcanvas-bottom は、ビューポートの下側にオフキャンバスを配置

以下に上側、右側、下側の実例を表示。

1.上側にオフキャンバスを配置 v5.0.0追加

見本
上側オフキャンバス
...
設定例
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">上側オフキャンバスの切替</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasTopLabel">上側オフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じるe"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

2.右側にオフキャンバスを配置

見本
右側オフキャンバス
...
設定例
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">右側オフキャンバスの切替</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">右側オフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

3.下側にオフキャンバスを配置

見本
下側オフキャンバス
...
設定例
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">下側オフキャンバスの切替</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">下側オフキャンバス</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>
【設定】
  • 左側にオフキャンバスを配置:.offcanvas.offcanvas-start
  • 右側にオフキャンバスを配置:.offcanvas.offcanvas-end
  • 上側にオフキャンバスを配置:.offcanvas.offcanvas-top
  • 下側にオフキャンバスを配置:.offcanvas.offcanvas-bottom
【変更履歴】
  • 【v5.0.0】
    • 上側にオフキャンバスを配置(.offcanvas.offcanvas-top)を追加
  • 【v5.2.0】
    • オフキャンバスを閉じるボタン:.btn-close.text-reset.btn-close

アクセシビリティ(Accessibility)

オフキャンバスパネルは概念的にはモーダルダイアログであるため、オフキャンバスのタイトルに必ず aria-labelledby="...".offcanvas に追加して下さい。すでにJavaScriptを経由して追加しているため、role="dialog" を追加する必要はないので注意。

CSS v5.0.0-beta3追加、v5.2.0Sassより名称変更

CSS変数(Variables)v5.2.0設定移行

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

デフォルトの設定
scss/_offcanvas.scss 内 offcanvas-css-vars の設定--#{$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};

Sass変数(Sass variables)v5.2.0変数から名称変更

デフォルトの設定
scss/_variables.scss 内 offcanvas-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-box-shadow:              $modal-content-box-shadow-xs;
$offcanvas-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

使用方法(Usage)

オフキャンバスプラグインは、いくつかのクラスと属性を利用して、手間のかかる作業を処理:

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

data-bs-dismiss="offcanvas" 属性を使用して閉じるボタンを追加し、これを押すことによりJavaScript機能が起動される。すべてのデバイスで適切に動作するように、必ず <button> 要素を使用して下さい。

データ属性経由で(Via data attributes)

切替(Toggle)

要素に data-bs-toggle="offcanvas"data-bs-targethref を追加して、1つのオフキャンバス要素の制御を自動的に割り当てる。data-bs-target 属性は、オフキャンバスを適用するCSSセレクタを受け入れる。必ず .offcanvas クラスをオフキャンバス要素に追加して下さい。またデフォルトで開いた状態にしたい場合は、あらかじめ .show クラスを追加する。

閉じる(Dismiss)v5.1.0追加

オフキャンバスを閉じるには、下記のようにオフキャンバス内のボタンの data 属性を使用して実行できる:

設定例
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="閉じる"></button>

または、下記のように、オフキャンバスの外側のボタンで data-bs-target を使用して閉じることもできる:

設定例
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="閉じる"></button>

JavaScript経由で(Via JavaScript)v5.2.0設定変更

手動で有効にする:

Bootstrap5.2.0~の設定例 緑背景が5.2.0での変更箇所
JavaScriptconst offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))
※Bootstrap5.1.3の設定例 赤背景が5.2.0での変更箇所
JavaScriptvar offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})
【変更履歴】
  • 【v5.2.0】
    • JavaScriptの記述をES6(ES2015)に変更

オプション(Options)

オプションは、データ属性かJavaScriptを経由して渡すことができるため、data-bs-animation="{value}" のように、オプション名を data-bs- に追加できる。データ属性を経由してオプションを渡す場合は、必ずオプション名の命名規則をキャメルケース(単語の先頭を大文字にする)からケバブケース(単語をハイフンでつなぐ)に変更して下さい。例:data-bs-customClass="beautifier" ではなく、data-bs-custom-class="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 で指定された値を再定義する。さらに、既存のデータ属性には、data-bs-delay='{"show":0,"hide":150}' のようなJSON値を格納できる。

名前 タイプ デフォルト 説明
backdrop
v5.2.0一部変更
boolean か string 'static' true オフキャンバスが開いている間にbodyにオーバーレイ背景を適用
true:有効/false:無効
または、背景クリック時にオフキャンバスを閉じないようにするには static を指定(実例は静的な背景に記載)
keyboard boolean true Esc が押されたときにオフキャンバスを閉じる
true:有効/false:無効
scroll boolean false オフキャンバスが開いているときにbodyをスクロールできるようにする
true:有効/false:無効
【変更履歴】
  • 【v5.2.0】
    • backdrop のタイプに"string 'static'" を追加

メソッド(Methods)v5.0.2メソッド追加

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

コンストラクタを使用してオフキャンバス・インスタンスが作成できる。以下に例を表示:

Bootstrap5.2.0~の設定例 緑背景が5.2.0での変更箇所
JavaScriptconst bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
※Bootstrap5.1.3の設定例 赤背景が5.2.0での変更箇所
JavaScriptvar myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
メソッド 説明
getInstance DOM要素に関連付けられたオフキャンバス・インスタンスを取得できる静的メソッド。
getOrCreateInstance
v5.0.2追加
DOM要素に関連付けられたオフキャンバス・インスタンスを取得したり、初期化されていない場合に新しいインスタンスを作成したりできる静的メソッド。
hide オフキャンバス要素を非表示にする。オフキャンバス要素が実際に非表示にされる前(つまり、hidden.bs.offcanvas イベントが発生する前)に呼び出し元に戻る
show オフキャンバス要素を表示。オフキャンバス要素が実際に表示される前(つまり、shown.bs.offcanvas イベントが発生する前)に呼び出し元に戻る
toggle オフキャンバス要素を表示または非表示に切り替える。オフキャンバス要素が実際に表示されたり非表示にされる前(つまり、shown.bs.offcanvas または hidden.bs.offcanvas イベントが発生する前)に呼び出し元に戻る
【変更履歴】
  • 【v5.0.2】
    • getOrCreateInstance メソッドが追加
  • 【v5.2.0】
    • JavaScriptの記述をES6(ES2015)に変更

イベント(Events)v5.2.0タイプ追加

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

イベントタイプ 説明
hide.bs.offcanvas hide のメソッドが呼び出されると直ちに発動。
hidden.bs.offcanvas オフキャンバス要素がユーザーから非表示になったときに発動(完全にCSS遷移が完了するまで待機)。
hidePrevented.bs.offcanvasv5.2.0追加 オフキャンバスの backdrop オプションが static であり、オフキャンバスが表示され、オフキャンバスの外側をクリックされたときに発動。keyboard オプションが false に設定されている場合に Esc を押しても発動。
show.bs.offcanvas show のインスタンス・メソッドが呼び出されると直ちに発動。
shown.bs.offcanvas ユーザーにオフキャンバス要素が表示されたときに発動(完全にCSS遷移が完了するまで待機)。
使用例 v5.2.0設定変更
JavaScriptconst myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // 何かをする...
})