メインコンテンツへスキップ

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

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

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

概要(Overview)

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

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

 

設定例(Example)v5.0.0-beta1設定変更

基本(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-*

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

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

見本
設定例
HTML<button type="button" class="btn btn-primary" id="liveToastBtn">トーストを表示</button>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <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を使用して、ライブのトーストデモを起動する。

JavaScript  var toastTrigger = document.getElementById('liveToastBtn')
  var toastLiveExample = document.getElementById('liveToast')
  if (toastTrigger) {
    toastTrigger.addEventListener('click', function () {
      var toast = new bootstrap.Toast(toastLiveExample)

      toast.show()
    })
  }

【設定】

  • .toast.position-fixed(固定位置ユーティリティクラス)で囲む(固定する位置は別途位置ユーティリティクラスを追加する必要あり)
【変更履歴】
  • 【v5.1.0】
    • トーストの非表示:.toast.hide の追加は不要に(追加されたままでも一応非表示にはなるが将来的には不要)

半透明(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.0.0-beta1設定変更

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

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="toast-container">
  <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 で囲む設定に変更

カスタムコンテンツ(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.0.0-alpha2設定追加

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

見本
設定例 v5.0.0-beta2設定変更
<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} を追加
  • 配色によっては、.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}

 

位置(Placement)v5.0.0-beta1設定変更

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

1. 単独のトーストを行末上に表示

見本
Bootstrap 11分前
こんにちは! これはトーストのメッセージです。
Bootstrap5.xの設定例 緑背景が変更箇所
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <div class="toast position-absolute 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>
【設定】
  • トーストを囲むコンテナに .position-relative(相対位置)を、.toast.position-absolute(絶対位置)と位置ユーティリティクラス(使用クラスは定義済クラスの組み合わせを参照)を追加
  • [aria-live], [aria-atomic].toast ではなく、コンテナに設定
【変更履歴】

2. 複数のトーストを行末上に表示

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

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- 配置する -->
  <!-- トースト間の間隔用 `.toast-container` -->
  <!-- `.position-absolute`, ` top-0`& `end-0`で、トーストを行末上隅に配置 -->
  <!-- トーストがコンテナの端にくっつくのを防ぐための `.p-3` -->
  <div class="toast-container position-absolute 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(内コンテナ)に .position-absolute(絶対位置)と位置ユーティリティクラス(使用クラスは定義済クラスの組み合わせを参照)を追加(.toast には設定しない)
【変更履歴】

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 でトーストを使用することを推奨。

 

Sass v5.0.0-beta3追加

変数(Variables)

デフォルトの設定
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:                1px;
$toast-border-color:                rgba($black, .1);
$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.0.0-alpha1設定変更

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

Bootstrap5.xの設定例
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に依存しない方法に変更

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

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

設定例
HTML<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="" のように、data-bs- にオプション名を追加。

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

【変更履歴】

  • 【v5.0.0-alpha2】
    • delay のデフォルトが 500(0.5秒)から 5000(5秒)に変更

メソッド(Methods)v5.0.0-alpha1設定変更、v5.0.2メソッド追加

show

要素のトーストを表示。トーストが実際に表示される前(つまり、show.bs.toast イベント発動前)に呼び出し元に戻る。手動でこのメソッドを呼び出す必要があるが、トーストは表示されない。

JavaScripttoast.show()

hide

要素のトーストを非表示にする。トーストが実際に非表示になる前(つまり、hidden.bs.toast イベント発動前)に呼び出し元に戻るautohidefalse にした場合は、このメソッドを手動で呼び出す必要がある。

JavaScripttoast.hide()

dispose

要素のトーストを非表示にする。トーストはDOMには残っているが、再表示できない。

JavaScripttoast.dispose()

getInstance v5.0.2追加

DOM要素に関連付けられたトースト・インスタンスを取得できる静的メソッド

JavaScriptvar myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Bootstrapトースト・インスタンスを返す

getOrCreateInstance v5.0.2追加

DOM要素に関連付けられたトースト・インスタンスを取得したり、初期化されていない場合に新しいインスタンスを作成したりできる静的メソッド。

JavaScriptvar myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Bootstrapトースト・インスタンスを返す
【変更履歴】
  • 【v5.0.0-alpha1】
    • $().toast('xxx')toast.xxx()
  • 【v5.0.2】
    • getInstance, getOrCreateInstance メソッドが追加

イベント(Events)

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