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

トースト(Toasts) v5.0.0-beta1設定変更

軽量で簡単にカスタマイズできるアラートメッセージを表示するトーストで、訪問者にプッシュ通知を送る。

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

トーストは、モバイルとデスクトップオペレーティングシステムによって一般化されたプッシュ通知を模倣するように設計された軽量の通知である。Flexboxで作られているので、整列配置が簡単にできる。

概要(Overview)

トーストプラグインを使用するときに知っておくべきこと:

  • トーストはパフォーマンス上の理由で任意で取得されるため、自分で初期化する必要がある(そのため実行コードが必要)。
  • トーストは autohide: false を指定しなければ自動的に非表示になる。

実例(Example)v5.0.0-beta1設定変更、v5.2.0デザイン変更

基本(Basic)

拡張性と予測可能なトーストを奨励するため、ヘッダとボディの設定を推奨。トーストのヘッダはdisplay: flex を使用しており、マージンとFlexboxユーティリティにより簡単にコンテンツを整列できる。

トーストは必要なだけの柔軟性があり、マークアップはほとんど必要ない。少なくとも、トーストされたコンテンツを含む単一の要素が必要であり、閉じるボタンの設定を強く推奨。
※実例としてモーダルを利用してトーストを表示する方法をモーダルでトースト表示に掲載。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." alt="..." class="rounded me-2">
    <strong class="me-auto">Bootstrap</strong>
    <small>11分前</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
  </div>
  <div class="toast-body">
    こんにちは! これはトーストのメッセージです。
  </div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." alt="..." class="rounded mr-2">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11分前</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    こんにちは! これはトーストのメッセージです。
  </div>
</div>
【設定】
  • div.toast > {div.toast-header > button.ms-2.mb-1.btn-close閉じるボタン》}《ヘッダ》 + div.toast-body《コンテンツ》
  • プラグインを使ってトーストを閉じるため、閉じるボタンには [data-bs-dismiss="toast"] を入れる
アクセシビリティの設定】
  • エラーのような重要なメッセージの場合は、div.toast に、role="alert" 属性(支援技術にアラート(警告情報)の役割を伝える)と aria-live="assertive" 属性(内容が更新されたことをユーザーに即座に伝える)を入れる
  • それ以外の場合は、div.toast に、role="status" 属性(支援技術にある種の更新された状態を伝える)と aria-live="polite" 属性(内容が更新されたことをユーザーに適切なタイミングで伝える)を入れる
  • さらにdiv.toast に、aria-atomic="true" 属性(コンテンツ変更時の通知箇所が変更箇所を含むブロック単位であることを伝える)を入れる
  • トーストを閉じるボタンとなる button.btn-close に、aria-label 属性(ビジュアルで目的を表現する要素に対するラベル付け)を入れる
【変更履歴】
  • 【v5.0.0-alpha2】
    • 閉じるボタンの設定の変更(.close.btn-closespan[aria-hidden="true"] > &times; が不要に)
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-dismiss="toast"][data-bs-dismiss="toast"]
    • RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
      • .ml-*.ms-*
      • .mr-*.me-*
  • 【v5.2.0】
    • border-radius の値を調整したので、若干丸みを帯びたデザインに変更

ライブの実例(Live example)v5.0.0-beta2新設(v4.6.0でバックポート)、v5.2.0設定変更

下のボタンをクリックして、デフォルトで非表示になっているトースト(見本ではユーティリティを使用して右下隅に配置)を表示。

見本
Bootstrap5.2.0~の設定例 緑背景が5.2.0での変更箇所
HTML<button type="button" class="btn btn-primary" id="liveToastBtn">トーストを表示</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." alt="..." class="rounded mr-2">
      <strong class="me-auto">Bootstrap</strong>
      <small>11分前</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
    </div>
    <div class="toast-body">
      こんにちは! これはトーストのメッセージです。
    </div>
  </div>
</div>

次のJavaScriptを使用して、ライブのトーストデモを起動する。

Bootstrap5.2.0~の設定例 緑背景が5.2.0での変更箇所
JavaScriptconst toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}
※Bootstrap5.1.3の設定例 赤背景が5.2.0での変更箇所
JavaScriptvar toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', function () {
    var toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}
※Bootstrap4.xの設定例
JavaScript$('#liveToastBtn').click(function () {
  $('#liveToast').toast('show')
})
【設定】
  • .toast.position-fixed(固定位置ユーティリティクラス)で囲む(固定する位置は別途位置ユーティリティクラスを追加する必要あり)
【変更履歴】
  • 【v5.1.0】
    • トーストの非表示:.toast.hide の追加は不要に(追加されたままでも一応非表示にはなるが将来的には不要)
  • 【v5.2.0】
    • div.position-fixed.toast-container を追加し、z-index の設定は不要に(.toast-container の中に組み込まれたため)
    • JavaScriptの記述をES6(ES2015)に変更

半透明(Translucent)

トーストは少し半透明なので、背面との色合いが混ざり合う。

見本

背景を bg-dark に設定した場合

背景画像をパターン化した場合

背景の設定をしない場合(参考)

Bootstrap5.xの設定例 緑背景が変更箇所
<div class="bg-dark p-4">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." alt="..." class="rounded me-2">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">11分前</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
    </div>
    <div class="toast-body">
      こんにちは! これはトーストのメッセージです。
    </div>
  </div>
</div>
【設定】
  • .toast の親要素に背景(色、画像)を設定すると、トーストの背景色が混ざり合って表示される(特に .toast-body 部分)
  • backdrop-filter CSSプロパティをサポートするブラウザでは、トーストの背面の要素がぼかされて表示されるので、背景によっては .toast-body 部分のメッセージが見やすくなる

縦積み(Stacking)v5.2.0設定変更

トーストをトースト用のコンテナで囲むことで縦積みになる。これにより、垂直方向に間隔が追加される。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." alt="..." class="rounded me-2">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">たった今</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
    </div>
    <div class="toast-body">
      見る? ちょうどこのような。
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." alt="..." class="rounded me-2">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2秒前</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
    </div>
    <div class="toast-body">
      注意喚起、トーストは自動的に縦積みになる
    </div>
  </div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." alt="..." class="rounded mr-2">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">たった今</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    見る? ちょうどこのような。
  </div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." alt="..." class="rounded mr-2">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2秒前</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    注意喚起、トーストは自動的に縦積みになる
  </div>
</div>
【設定】
  • div.toast-container > {div.toast + div.toast}
【変更履歴】
  • 【v5.0.0-beta1】
    • div.toast-container で囲む設定に変更
  • 【v5.2.0】
    • div.toast-container.position-static を追加

カスタムコンテンツ(Custom content)v5.0.0-alpha2設定追加、v5.0.0-beta2設定変更

サブコンポーネントを削除するか、ユーティリティで微調整するか、独自のマークアップの追加でトーストをカスタマイズ。ここでは、デフォルトの .toast-header を削除し、いくつかのflexboxユーティリティを使用してレイアウトを調整することで、よりシンプルなトーストを作成。

見本
設定例
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      こんにちは! これはトーストのメッセージです。
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="閉じる"></button>
  </div>
</div>
【設定】
  • div.toast-header は入れなくても可
【変更履歴】
  • 【v5.0.0-beta2】
    • .toast.d-flex.align-items-center > {.toast-body + button.btn-close.ms-auto.me-2} ⇒ .toast.align-items-center > .d-flex > {.toast-body + button.btn-close.me-2.m-auto}

または、トーストに追加のコントロールとコンポーネントを追加できる。

見本
設定例
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    こんにちは! これはトーストのメッセージです。
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">行動する</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">閉じる</button>
    </div>
  </div>
</div>
【設定】
  • div.toast-body 内にコンテンツを入れることも可能

配色(Color schemes)v5.2.0設定変更

上記の例に基づいて、カラーユーティリティ背景色ユーティリティまたは.text-bg-{color} ヘルパーを使用して、さまざまなトーストの配色ができる。ここでは、.toast.text-bg-primary を追加し、閉じるボタンに .btn-close-white を追加。エッジをくっきりさせるためデフォルトの境界線を .border-0 で削除。

見本
Bootstrap5.2.0~の設定例 緑背景が5.2.0での変更箇所
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      こんにちは! これはトーストのメッセージです。
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="閉じる"></button>
  </div>
</div>
※Bootstrap5.1.3の設定例 赤背景が5.2.0での変更箇所
<div class="toast align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      こんにちは! これはトーストのメッセージです。
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="閉じる"></button>
  </div>
</div>
【設定】
  • .toast.bg-{color}.text-{color}.text-bg-{themecolor} を追加
  • 配色によっては、.btn-close(閉じるボタン)に .btn-close-white(白ボタン)を追加
【変更履歴】
  • 【v5.0.0-beta2】
    • コンテンツの設定を変更
      .toast.d-flex.align-items-center > {.toast-body + button.btn-close.ms-auto.me-2} ⇒ .toast.align-items-center > .d-flex > {.toast-body + button.btn-close.me-2.m-auto}
  • 【v5.2.0】
    • .toast.text-bg-{themecolor} の使用が可能に

配置(Placement)v5.2.0設定変更

必要に応じてカスタムCSSでトーストを配置。行末(右)上や中央上は、通知のためによく使われる。一度に1つのトーストだけを表示する場合は、位置ユーティリティクラス.toast に配置。

1.トーストを1つだけ表示する場合

見本
Bootstrap 11分前
こんにちは! これはトーストのメッセージです。
Bootstrap5.xの設定例 緑背景が変更箇所
行末(右)上に表示する場合<div aria-live="polite" aria-atomic="true" class="position-relative">
  <div class="toast top-0 end-0 m-3">
    <div class="toast-header">
      <img src="..." alt="..." class="rounded me-2">
      <strong class="me-auto">Bootstrap</strong>
      <small>11分前</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
    </div>
    <div class="toast-body">
      こんにちは! これはトーストのメッセージです。
    </div>
  </div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
右上に表示する場合<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." alt="..." class="rounded mr-2">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11分前</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      こんにちは! これはトーストのメッセージです。
    </div>
  </div>
</div>

位置クラスの組み合わせ

位置 クラス
行頭(左)上 .top-0.start-0
中央上 .top-0.start-50.translate-middle-x
行末(右)上 .top-0.end-0
行頭(左)中央 .top-50.start-0.translate-middle-y
上下左右中央 .top-50.start-50.translate-middle
行末(右)中央 .top-50.end-0.translate-middle-y
行頭(左)下 .bottom-0.start-0
中央下 .bottom-0.start-50.translate-middle-x
行末(右)下 .bottom-0.end-0
【設定】
  • トーストを囲むコンテナに .position-relative(相対位置)を、.toast に 位置ユーティリティクラス(使用クラスは位置クラスの組み合わせを参照)を追加
  • [aria-live], [aria-atomic].toast ではなく、コンテナに設定
【変更履歴】
  • 【v5.0.0-beta1】
  • 【v5.2.0】
    • 不要なため .toast から .position-absolute(絶対位置)を外す

2. 複数のトーストを表示する場合

より多くの通知を生成するシステムでは、簡単に縦積みになるようにラッピング要素を使用して下さい。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
行末(右)上に表示する場合<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- 配置する -->
  <!-- トースト間の間隔用 `.toast-container` -->
  <!-- `top-0`& `end-0`で、トーストを行末上隅に配置 -->
  <!-- トーストがコンテナの端にくっつくのを防ぐための `.p-3` -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- その後、トーストを入れる -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." alt="..." class="rounded me-2">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">たった今</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
      </div>
      <div class="toast-body">
        見る? ちょうどこのような。
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." alt="..." class="rounded me-2">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2秒前</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
      </div>
      <div class="toast-body">
        注意喚起、トーストは自動的に縦積みになる
      </div>
    </div>
  </div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
右上に表示する場合<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div style="position: absolute; top: 0; right: 0;">
    ...
  </div>
</div>
【設定】
  • トーストを囲む外コンテナに .position-relative(相対位置)、.toast-container(内コンテナ)に位置ユーティリティクラス(使用クラスは位置クラスの組み合わせを参照)を追加(.toast には設定しない)
【変更履歴】
  • 【v5.0.0-beta1】
  • 【v5.2.0】
    • 不要なため .toast-container から .position-absolute(絶対位置)を外す

3. Flexユーティリティクラスを使って上下左右中央に表示

また、Flexboxユーティリティを使ってトーストを水平や垂直に配置させることもできる。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<!-- トースト配置用のFlexboxコンテナ-->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- その後、トーストを入れる -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." alt="..." class="rounded me-2">
      <strong class="me-auto">Bootstrap</strong>
      <small>11分前</small>
      <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
    </div>
    <div class="toast-body">
      こんにちは! これはトーストのメッセージです。
    </div>
  </div>
</div>
【設定】

アクセシビリティ(Accessibility)

トーストは、訪問者やユーザーの中断が少ないように意図されているため、スクリーンリーダや同様の補助技術を持つ人を助けるために、トライアルを aria-live region で囲む必要がある。ライブリージョンの変更(トーストコンポーネントの挿入/更新など)は、ユーザーのフォーカスを移動したりユーザーを中断することなく、スクリーンリーダーによって自動的に通知される。さらに、aria-atomic="true" を組み込んでトースト全体が、変更内容を通知するだけでなく、常に単一の(アトミック)単位として通知されるようにする(トーストのコンテンツの一部のみを更新する場合や、後で同じトーストのコンテンツを表示する場合は問題が発生する可能性がある)。プロセスに必要な情報が重要な場合(例:フォーム内のエラーのリスト)については、トーストの代わりにアラートコンポーネントを使用して下さい。

トーストが生成や更新されるに、ライブリージョンがマークアップ内に存在する必要があるので注意。両方を同時に動的に生成してページに挿入すると、一般的には補助技術によって通知されない。

また、コンテンツに応じて rolearia-live レベルを調整する必要がある。エラーのような重要なメッセージの場合は、role="alert" aria-live="assertive" を使用し、それ以外の場合は、role="status" aria-live="polite" 属性を使用する。

表示するコンテンツが変更されたら、必ずdelay タイムアウトを更新して、ユーザーがトーストを読むのに十分な時間を確保して下さい。

Bootstrap5.xの設定例(10秒後に非表示にする設定) 緑背景が変更箇所
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
  ...
</div>

autohide: false を使用する場合は、閉じるボタンを追加して、ユーザーがトーストを閉じられるようにする必要がある。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." alt="..." class="rounded me-2">
    <strong class="me-auto">Bootstrap</strong>
    <small>11分前</small>
    <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
  </div>
  <div class="toast-body">
    こんにちは! これはトーストのメッセージです。
  </div>
</div>

技術的には、トーストにフォーカス可能/アクション可能なコントロール(追加のボタンやリンクなど)を追加できるが、トーストを自動非表示にするためにこれを行うことは避けて下さい。トーストに長いdelay タイムアウトを与えても、キーボードと支援技術のユーザーは、アクションを実行するのに間に合うようにトーストに到達するのが難しい場合がある(トーストが表示されたときにフォーカスが得られないため)。どうしてもさらにコントロールが必要な場合は、autohide:false でトーストを使用することを推奨。

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

CSS変数(Variables)v5.2.0新設

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

デフォルトの設定
scss/_toasts.scss 内 toast-css-vars の設定--#{$prefix}toast-padding-x: #{$toast-padding-x};
--#{$prefix}toast-padding-y: #{$toast-padding-y};
--#{$prefix}toast-spacing: #{$toast-spacing};
--#{$prefix}toast-max-width: #{$toast-max-width};
@include rfs($toast-font-size, --#{$prefix}toast-font-size);
--#{$prefix}toast-color: #{$toast-color};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-border-width: #{$toast-border-width};
--#{$prefix}toast-border-color: #{$toast-border-color};
--#{$prefix}toast-border-radius: #{$toast-border-radius};
--#{$prefix}toast-box-shadow: #{$toast-box-shadow};
--#{$prefix}toast-header-color: #{$toast-header-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color};
--#{$prefix}toast-header-border-color: #{$toast-header-border-color};

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

デフォルトの設定
scss/_variables.scss 内 toast-variables の設定$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

使用方法(Usage)v5.2.0設定変更

JavaScriptでトーストを初期化する:

Bootstrap5.2.0~の設定例 緑背景が5.2.0での変更箇所
JavaScriptconst toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))
※Bootstrap5.1.3の設定例 赤背景が5.2.0での変更箇所
JavaScriptvar toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})
※Bootstrap4.xの設定例
JavaScript$('.toast').toast(option)
【変更履歴】
  • 【v5.0.0-alpha1】
    • JavaScriptの記述をjQueryに依存しない方法に変更
  • 【v5.2.0】
    • JavaScriptの記述をES6(ES2015)に変更

トリガー(Triggers)v5.1.0追加

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

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

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

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

オプション(Options)v5.0.0-alpha2一部変更

オプションは、データ属性か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値を格納できる。

名前 タイプ デフォルト 説明
animation boolean true トーストにCSSフェード遷移を適用
true:有効/false:無効
autohide boolean true トーストを自動的に非表示
true:有効/false:無効
delay number 5000v5.0.0-alpha2変更 トーストの非表示の遅延時間(1000分の1秒単位)
【変更履歴】
  • 【v5.0.0-alpha2】
    • delay のデフォルトが 500(0.5秒)から 5000(5秒)に変更

メソッド(Methods)v5.2.0メソッド追加、設定変更

メソッド 説明
dispose 要素のトーストを非表示にする。トーストはDOMには残っているが、再表示できない。
getInstance
v5.0.2追加
v5.2.0設定変更
DOM要素に関連付けられたトースト・インスタンスを取得できる静的メソッド。
設定例const myToastEl = document.getElementById('myToastEl')
const myToast = bootstrap.Toast.getInstance(myToastEl) // Bootstrapトースト・インスタンスを返す
getOrCreateInstance
v5.0.2追加
v5.2.0設定変更
DOM要素に関連付けられたトースト・インスタンスを取得したり、初期化されていない場合に新しいインスタンスを作成したりできる静的メソッド。
設定例const myToastEl = document.getElementById('myToastEl')
const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Bootstrapトースト・インスタンスを返す
hide 要素のトーストを非表示にする。トーストが実際に非表示になる前(つまり、hidden.bs.toast イベント発動前)に呼び出し元に戻るautohidefalse にした場合は、このメソッドを手動で呼び出す必要がある。
isShown
v5.2.0追加
トーストの可視性の状態に応じてブール値を返す。
show 要素のトーストを表示。トーストが実際に表示される前(つまり、show.bs.toast イベント発動前)に呼び出し元に戻る。手動でこのメソッドを呼び出す必要があるが、トーストは表示されない。
【変更履歴】
  • 【v5.0.0-alpha1】
    • $().toast('xxx')toast.xxx()
  • 【v5.0.2】
    • getInstance, getOrCreateInstance メソッドが追加
  • 【v5.2.0】
    • isShown メソッドを追加
    • JavaScriptの記述をES6(ES2015)に変更(varconst

イベント(Events)

イベントタイプ 説明
hide.bs.toast hide インスタンスメソッドが呼び出されるとすぐに発動。
hidden.bs.toast トーストがユーザーから非表示になったら発動。
show.bs.toast show インスタンスメソッドが呼び出されるとすぐに発動。
shown.bs.toast トーストがユーザーに表示されたら発動。
使用例 v5.2.0設定変更
JavaScriptconst myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // 何かをする...
})