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

オフキャンバス

いくつかのクラスと 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 コンポーネントまたはカスタム要素を配置できます。 
<div class="offcanvas offcanvas-start" 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 text-reset" 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 とのリンク
オフキャンバス
プレースホルダーとしてのテキスト。実生活では、選択した要素を持つことができます。いいね、テキスト、画像、リストなど。 
<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 text-reset" 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" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <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>

配置

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

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

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

オフキャンバストップ
... 
<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 id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
オフキャンバス右
... 
<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 id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
オフキャンバスボトム
... 
<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 text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

背景

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

スクロールで着色

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

背景付きオフキャンバス

.....

スクロールする背景

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

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<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" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" 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>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<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 text-reset" 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>

アクセシビリティ

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

サス

変数

$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-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>
オフキャンバスを非表示にする両方の方法がサポートされていますが、オフキャンバスの外部から非表示にすることは WAI-ARIA モーダル ダイアログ デザイン パターン と一致しないことに注意してください 。これは自己責任で行ってください。

JavaScript 経由

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

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

オプション

オプションは、データ属性または JavaScript を介して渡すことができます。data-bs-データ属性の場合、オプション名をのようにに追加しますdata-bs-backdrop=""。

名前 タイプ デフォルト 説明
backdrop ブール値 true offcanvas が開いているときに body に背景を適用する
keyboard ブール値 true エスケープキーが押されたときにオフキャンバスを閉じます
scroll ブール値 false offcanvas が開いているときにボディのスクロールを許可する

メソッド

非同期メソッドと遷移

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

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

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

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

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

イベント

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

イベントタイプ 説明
show.bs.offcanvas showこのイベントは、インスタンス メソッドが呼び出されるとすぐに発生します。
shown.bs.offcanvas このイベントは、offcanvas 要素がユーザーに表示されるようになったときに発生します (CSS トランジションが完了するのを待ちます)。
hide.bs.offcanvas hideこのイベントは、メソッドが呼び出されるとすぐに発生します。
hidden.bs.offcanvas このイベントは、offcanvas 要素がユーザーから隠されているときに発生します (CSS トランジションが完了するのを待ちます)。 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})