トースト

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

このページでは

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

概要

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

トーストはパフォーマンス上の理由からオプトインであるため、自分で初期化する必要があります。
指定しない場合、トーストは自動的に非表示になりますautohide: false。

このコンポーネントのアニメーション効果は、 prefers-reduced-motionメディアクエリに依存します。アクセシビリティドキュメントの縮小モーションセクションを参照してください。

例

基本

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

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

こんにちは世界！これは乾杯のメッセージです。

html

<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)。これはもう必要ありません。ただし、下位互換性のために、スクリプトは次のメジャーバージョンまでクラスを切り替え続けます (実際には必要ありませんが)。

実際の例

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

Hello, world! This is a toast message.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</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="..." 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 を使用して、ライブトーストデモをトリガーします。

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

    toast.show()
  })
}

半透明

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

こんにちは世界！これは乾杯のメッセージです。

html

<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>

スタッキング

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

見る？ちょうどこのような。

注意、トーストは自動的にスタックされます

html

<div class="toast-container position-static">
  <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からカスタムの非表示アイコンを追加し、いくつかのフレックスボックスユーティリティを使用してレイアウトを調整することで、よりシンプルなトーストを作成しました。

こんにちは世界！これは乾杯のメッセージです。

html

<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>

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

こんにちは世界！これは乾杯のメッセージです。

html

<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>

配色

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

こんにちは世界！これは乾杯のメッセージです。

html

<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">
      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.

こんにちは世界！これは乾杯のメッセージです。

html

<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 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>

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

見る？ちょうどこのような。

注意、トーストは自動的にスタックされます

html

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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>

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

こんにちは世界！これは乾杯のメッセージです。

html

<!-- 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場合は、閉じるボタンを追加して、ユーザーがトーストを閉じられるようにする必要があります。

こんにちは世界！これは乾杯のメッセージです。

html

<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ます。

CSS

変数

v5.2.0 で追加

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

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$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};

サス変数

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

使用法

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

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => 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="{value}"。データ属性を介してオプションを渡すときは、オプション名のケースタイプを「camelCase」から「kebab-case 」に変更してください。たとえば、data-bs-custom-class="beautifier"の代わりにを使用しdata-bs-customClass="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。さらに、既存のデータ属性は、のような JSON 値を格納できますdata-bs-delay='{"show":0,"hide":150}'。

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

メソッド

非同期メソッドと遷移

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

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

方法	説明
`dispose`	要素のトーストを非表示にします。トーストは DOM に残りますが、表示されなくなります。
`getInstance`	DOM 要素に関連付けられたトーストインスタンスを取得できる静的メソッド。例: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)`Bootstrap toast インスタンスを返します。
`getOrCreateInstance`	DOM 要素に関連付けられたトーストインスタンスを取得したり、初期化されていない場合に新しいインスタンスを作成したりできる静的メソッド。 `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`ブートストラップトーストインスタンスを返します。
`hide`	要素のトーストを非表示にします。トーストが実際に非表示になる前 (つまり、イベントが発生する前)に呼び出し元に戻ります。を作成した`hidden.bs.toast`場合は、このメソッドを手動で呼び出す必要があります。`autohidefalse`
`isShown`	トーストの可視性の状態に従ってブール値を返します。
`show`	要素のトーストを表示します。トーストが実際に表示される前 (つまり、イベントが発生する前)に呼び出し元に戻ります。`shown.bs.toast`このメソッドを手動で呼び出す必要があります。代わりに、トーストは表示されません。

イベント

イベント	説明
`hide.bs.toast`	`hide`このイベントは、インスタンスメソッドが呼び出されるとすぐに発生します。
`hidden.bs.toast`	このイベントは、トーストがユーザーから非表示になったときに発生します。
`show.bs.toast`	`show`このイベントは、インスタンスメソッドが呼び出されるとすぐに発生します。
`shown.bs.toast`	このイベントは、トーストがユーザーに表示されるようになったときに発生します。

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})