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

トースト

トースト、軽量で簡単にカスタマイズ可能なアラート メッセージを使用して、訪問者にプッシュ通知を送信します。

このページでは

トーストは、モバイルおよびデスクトップ オペレーティング システムで普及しているプッシュ通知を模倣するように設計された軽量の通知です。フレックスボックスで構築されているため、位置合わせと配置が簡単です。

概要

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

  • トーストはパフォーマンス上の理由からオプトインであるため、自分で初期化する必要があります。
  • 指定しない場合、トーストは自動的に非表示になりますautohide: false。
このコンポーネントのアニメーション効果は、 prefers-reduced-motionメディア クエリに依存します。アクセシビリティ ドキュメントの縮小モーション セクションを参照してください 。

例

基本

拡張可能で予測可能なトーストを促進するために、ヘッダーと本文をお勧めします。トースト ヘッダーは を使用display: flexし、margin および flexbox ユーティリティのおかげでコンテンツを簡単に配置できます。

トーストは必要なだけ柔軟で、必要なマークアップはほとんどありません。少なくとも、「トースト」コンテンツを含む 1 つの要素が必要であり、閉じるボタンを強く推奨します。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
以前は、スクリプトでクラスを動的に追加し .hideて、トーストを完全に非表示にしていました ( display:noneだけでなく を使用 opacity:0)。これはもう必要ありません。ただし、下位互換性のために、スクリプトは次のメジャー バージョンまでクラスを切り替え続けます (実際には必要ありませんが)。

実際の例

下のボタンをクリックして、デフォルトで非表示になっているトースト (右下隅にあるユーティリティと共に配置) を表示します。

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</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="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

次の 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()
  })
}

半透明

トーストはわずかに半透明で、下にあるものと調和します。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

スタッキング

トーストをトースト コンテナーに包んで積み重ねることができます。これにより、垂直方向にスペースが追加されます。

<div class="toast-container">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

カスタムコンテンツ

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

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
    Hello, world! This is a toast message.
   </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

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

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

配色

上記の例に基づいて、色と背景のユーティリティを使用して、さまざまなトーストの配色を作成できます。ここでは、に.bg-primaryとを追加してから、閉じるボタンに追加しています。鮮明なエッジを得るために、デフォルトの境界線を で削除します。.text-white.toast.btn-close-white.border-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">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

配置

必要に応じて、カスタム CSS を使用してトーストを配置します。右上は通知によく使用され、上部中央も同様です。一度に 1 つのトーストのみを表示する場合は、配置スタイルを.toast.

ブートストラップ 11分前
こんにちは世界！これは乾杯のメッセージです。 
<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

より多くの通知を生成するシステムの場合は、簡単にスタックできるようにラッピング要素を使用することを検討してください。

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container position-absolute top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

トーストを水平方向および/または垂直方向に整列させるフレックスボックス ユーティリティを使用することもできます。

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

アクセシビリティ

トーストは、訪問者やユーザーに小さな中断を与えることを目的としているため、スクリーン リーダーや同様の支援技術を使用しているユーザーを支援するために、aria-liveリージョンでトーストをラップする必要があります。ライブ リージョンへの変更 (トースト コンポーネントの注入/更新など) は、スクリーン リーダーによって自動的に通知されます。ユーザーのフォーカスを移動したり、ユーザーを中断したりする必要はありません。さらに、aria-atomic="true"何が変更されたかを通知するだけでなく、トースト全体が常に 1 つの (アトミック) ユニットとして通知されるようにするために含めます (トーストのコンテンツの一部のみを更新する場合や、同じトースト コンテンツを表示する場合に問題が発生する可能性があります)。後の時点で）。フォーム内のエラーのリストなど、必要な情報がプロセスにとって重要な場合は、アラート コンポーネントを使用します。トーストの代わりに。

トーストが生成または更新される前に、ライブ リージョンがマークアップに存在する必要があることに注意してください。両方を同時に動的に生成してページに挿入した場合、通常、それらは支援技術によって通知されません。

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

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

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

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

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

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

サス

変数

$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);

使用法

JavaScript を介してトーストを初期化します。

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})

トリガー

以下に示すように、トースト内のdataボタンの属性を使用して、却下を実現できます。

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

または、以下に示すように を使用して、トーストの外側のボタンでdata-bs-target:

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

オプション

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

名前 タイプ デフォルト 説明
animation ブール値 true トーストに CSS フェード トランジションを適用する
autohide ブール値 true トーストを自動的に隠す
delay 番号 5000 トーストを非表示にする遅延 (ミリ秒)

メソッド

非同期メソッドと遷移

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

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

見せる

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

toast.show()

隠れる

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

toast.hide()

廃棄

要素のトーストを非表示にします。トーストは DOM に残りますが、表示されなくなります。

toast.dispose()

getInstance

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

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

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

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

イベント

イベントタイプ 説明
show.bs.toast showこのイベントは、インスタンス メソッドが呼び出されるとすぐに発生します。
shown.bs.toast このイベントは、トーストがユーザーに表示されるようになったときに発生します。
hide.bs.toast hideこのイベントは、インスタンス メソッドが呼び出されるとすぐに発生します。
hidden.bs.toast このイベントは、トーストがユーザーから非表示になったときに発生します。 
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})