Skip to main content Skip to docs navigation
View on GitHub

トースト Toasts

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

On this page

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

概要

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

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

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

例

基本

拡張可能で予測可能な toast を促進するために、ヘッダーと本文をお勧めします。Toast ヘッダーは display: flex を使用しており、マージンと flexbox ユーティリティのおかげでコンテンツの配置が簡単です。

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

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

ライブ例

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

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

ライブ toast デモをトリガーするために、以下の JavaScript を使用します:

site/src/assets/partials/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()
  })
}

半透明

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

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>

スタッキング

toast コンテナでラップすることで toast をスタックでき、垂直方向にスペースが追加されます。

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 をカスタマイズします。ここでは、デフォルトの .toast-header を削除し、Bootstrap Iconsのカスタム非表示アイコンを追加し、いくつかの flexbox ユーティリティを使用してレイアウトを調整することで、よりシンプルな toast を作成しました。

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>

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

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 カラースキームを作成できます。ここでは、.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 を使用して、必要に応じて toast を配置します。右上は通知によく使用され、上部中央も同様です。一度に1つの toast しか表示しない場合は、配置スタイルを .toast に直接配置します。

Bootstrap 11 mins ago
Hello, world! This is a toast message.
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>

flexbox ユーティリティを使用して、toast を水平方向および/または垂直方向に配置することもできます。

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>

アクセシビリティ

Toast は訪問者やユーザーへの小さな中断を意図しているため、スクリーンリーダーや同様の支援技術を使用しているユーザーを支援するには、toast を aria-live 領域でラップする必要があります。ライブ領域への変更(toast コンポーネントの挿入/更新など)は、ユーザーのフォーカスを移動したり、ユーザーを中断したりすることなく、スクリーンリーダーによって自動的にアナウンスされます。さらに、aria-atomic="true" を含めて、変更されたものだけをアナウンスするのではなく、toast 全体が常に単一の(アトミックな)ユニットとしてアナウンスされるようにします(これは、toast のコンテンツの一部のみを更新する場合、または後の時点で同じ toast コンテンツを表示する場合に問題を引き起こす可能性があります)。必要な情報がプロセスにとって重要な場合、たとえばフォーム内のエラーのリストの場合は、toast の代わりにアラートコンポーネントを使用してください。

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

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

表示するコンテンツが変更されるにつれて、ユーザーが toast を読むのに十分な時間があるように、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 を使用する場合は、ユーザーが toast を閉じることができるように閉じるボタンを追加する必要があります。

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>

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

CSS

変数

Added in v5.2.0

Bootstrap の進化する CSS 変数アプローチの一部として、toast は .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 経由で toast を初期化します:

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

トリガー

以下のように、toast内のボタンにdata-bs-dismiss属性を指定することで閉じることができます: 

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

または、以下のように、toastの外側のボタンに追加のdata-bs-targetを使用することもできます: 

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

オプション

オプションはdata属性またはJavaScriptを介して渡すことができます。data-bs-にオプション名を追加できます。例: data-bs-animation="{value}"。data属性を介してオプションを渡す場合は、オプション名の大文字小文字を"camelCase"から"kebab-case"に変更してください。例えば、data-bs-customClass="beautifier"の代わりにdata-bs-custom-class="beautifier"を使用します。

Bootstrap 5.2.0以降、すべてのコンポーネントは、JSON文字列として単純なコンポーネント設定を格納できる実験的な予約済みdata属性data-bs-configをサポートしています。要素にdata-bs-config='{"delay":0, "title":123}'とdata-bs-title="456"属性がある場合、最終的なtitle値は456になり、個別のdata属性はdata-bs-configで指定された値を上書きします。さらに、既存のdata属性はdata-bs-delay='{"show":0,"hide":150}'のようなJSON値を格納できます。

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

NameTypeDefaultDescription
animationbooleantruetoast に CSS フェードトランジションを適用します。
autohidebooleantrue遅延後に toast を自動的に非表示にします。
delaynumber5000toast を非表示にするまでの遅延(ミリ秒単位)。

メソッド

すべてのAPIメソッドは非同期でトランジションを開始します。 トランジションが開始されるとすぐに呼び出し元に戻りますが、終了する前に戻ります。さらに、トランジション中のコンポーネントに対するメソッド呼び出しは無視されます。JavaScriptドキュメントで詳細を確認してください。

MethodDescription
dispose要素の toast を非表示にします。toast は DOM に残りますが、表示されなくなります。
getInstanceDOM 要素に関連付けられた toast インスタンスを取得できる Static メソッド。
例: const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl) Bootstrap toast インスタンスを返します。
getOrCreateInstanceDOM 要素に関連付けられた toast インスタンスを取得するか、初期化されていない場合は新しいものを作成できる Static メソッド。
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) Bootstrap toast インスタンスを返します。
hide要素の toast を非表示にします。toast が実際に非表示になる前に呼び出し元に戻ります(つまり、hidden.bs.toast イベントが発生する前)。autohide を false にした場合は、このメソッドを手動で呼び出す必要があります。
isShowntoast の表示状態に応じてブール値を返します。
show要素の toast を表示します。toast が実際に表示される前に呼び出し元に戻ります(つまり、shown.bs.toast イベントが発生する前)。このメソッドを手動で呼び出す必要があります。そうしないと、toast は表示されません。

イベント

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