GitHub で表示

トースト

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

このページの内容

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

概要

トーストプラグインを使用する際の注意点

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

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

例

基本

拡張可能で予測可能なトーストを促進するために、ヘッダーと本文を使用することをお勧めします。トーストヘッダーは`display: flex`を使用しており、マージンとフレックスボックスのユーティリティのおかげで、コンテンツの位置合わせが容易になります。

トーストは必要に応じて柔軟性があり、必要なマークアップはほとんどありません。「トーストされた」コンテンツを含む単一の要素が最低限必要であり、閉じるボタンを強くお勧めします。

こんにちは、世界！これはトーストメッセージです。

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`クラスが追加され、トーストが完全に非表示になっていました（`opacity:0`ではなく`display:none`で）。これはもう必要ありません。ただし、後方互換性のために、次のメジャーバージョンまでスクリプトはクラスを切り替えます（実際には必要ありません）。

ライブ例

以下のボタンをクリックして、デフォルトで非表示になっているトースト（ユーティリティを使用して右下に配置）を表示します。

こんにちは、世界！これはトーストメッセージです。

<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を使用します。

site/assets/js/snippets.js

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')

if (toastTrigger) {
  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
  toastTrigger.addEventListener('click', () => {
    toastBootstrap.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-body-secondary">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-body-secondary">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-body-secondary">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>

カスタムコンテンツ

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

こんにちは、世界！これはトーストメッセージです。

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>

配色

上記の例に基づいて、カラーと背景のユーティリティを使用して、さまざまなトーストの配色を作成できます。ここでは、`.toast`に`.text-bg-primary`を追加し、閉じるボタンに`.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-body-secondary position-relative bd-example-toasts rounded-3">
  <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-body-secondary">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-body-secondary">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"`を含めることで、変更された部分だけをアナウンスするのではなく、トースト全体が常に単一の（アトミックな）単位としてアナウンスされるようにします（トーストのコンテンツの一部だけを更新する場合、または後で同じトーストコンテンツを表示する場合に問題が発生する可能性があります）。必要な情報がプロセスにとって重要である場合（たとえば、フォームのエラーリストの場合）、トーストの代わりにアラートコンポーネントを使用してください。

ライブ領域は、トーストが生成または更新される前にマークアップに存在する必要があることに注意してください。動的に同時に生成してページに挿入する場合、支援技術によって一般的にアナウンスされません。

コンテンツに応じて`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によるカスタマイズも引き続きサポートされます。

scss/_toasts.scss

--#{$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};

Sass変数

scss/_variables.scss

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-border-width:                var(--#{$prefix}border-width);
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               var(--#{$prefix}border-radius);
$toast-box-shadow:                  var(--#{$prefix}box-shadow);
$toast-spacing:                     $container-padding-x;

$toast-header-color:                var(--#{$prefix}secondary-color);
$toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-header-border-color:         $toast-border-color;

使用方法

JavaScriptによるトーストの初期化

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

トリガー

非表示化は、下記のようにトースト内のボタンにdata-bs-dismiss属性を使用することで実現できます。

<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-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値を格納できます。

最終的な設定オブジェクトは、data-bs-config、data-bs-、およびjsオブジェクトをマージした結果であり、最後に指定されたキーと値が他の値を上書きします。

名前	型	デフォルト	説明
`animation`	boolean	`true`	トーストにCSSフェードトランジションを適用します。
`autohide`	boolean	`true`	遅延後にトーストを自動的に非表示にします。
`delay`	number	`5000`	トーストを非表示にするまでの遅延時間（ミリ秒）。

メソッド

すべてのAPIメソッドは非同期であり、トランジションを開始します。 これらのメソッドは、トランジションが開始された直後に呼び出し元に返りますが、トランジションが終了する前です。さらに、トランジション中のコンポーネントへのメソッド呼び出しは無視されます。JavaScriptドキュメントで詳細をご覧ください。

メソッド	説明
`dispose`	要素のトーストを非表示にします。トーストはDOMに残りますが、表示されなくなります。
`getInstance`	DOM要素に関連付けられたトーストインスタンスを取得できる静的メソッドです。例：`const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)` Bootstrapトーストインスタンスを返します。
`getOrCreateInstance`	DOM要素に関連付けられたトーストインスタンスを取得するか、初期化されていない場合は新しいトーストインスタンスを作成できる静的メソッドです。 `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Bootstrapトーストインスタンスを返します。
`hide`	要素のトーストを非表示にします。トーストが実際に非表示になる前（つまり、`hidden.bs.toast`イベントが発生する前）に呼び出し元に返ります。`autohide`を`false`にした場合は、このメソッドを手動で呼び出す必要があります。
`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...
})