Skip to main content Skip to docs navigation
GitHubで見る

トースト

Toasts

軽量で簡単にカスタマイズできるアラートメッセージをプッシュ通知します。

項目

トーストは、モバイルやデスクトップのOSで普及しているプッシュ通知を模倣して設計された軽量な通知です。flexboxで作られているので、位置合わせや配置が簡単です。

概要

トーストプラグインを使うときに知っておきたいこと

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

例

ベーシック

トーストの拡張性と予測可能性を高めるために、ヘッダと本文を推奨します。トーストのヘッダはdisplay: flexを使用しており、 marginとflexboxユーティリティによりコンテンツを簡単に整列させることができます。

トーストは、必要な分だけ柔軟に対応でき、必要なマークアップはほとんどありません。最低限、“トースト"コンテンツを含む単一の要素を必要とし、解散ボタンを強く推奨します。

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を指定して）。これはもう必要ありません。しかし、後方互換性のために、私たちのスクリプトは次のメジャーバージョンまで（実際には必要ないにもかかわらず）このクラスをトグルし続けます。

ライブデモ

下のボタンをクリックすると、デフォルトでは.hideになっているトースト（ユーティリティで右下隅に配置）が表示されます。

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

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にポジショニングスタイルを記述します。

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ユーティリティを使って、トーストを水平方向や垂直方向に整列させることもできます。

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をaria-liveregionでラップする必要があります。ライブ領域への変更（ Toastの挿入/更新など ）は、ユーザーのフォーカスを移動したり、ユーザーを中断したりする必要なく、スクリーンリーダーによって自動的に通知されます。さらに、aria-atomic ="true"を含めて、変更内容を通知するのではなく、トースト全体が常に1つの（アトミック）ユニットとしてアナウンスされるようにします(これは、トーストの内容の一部だけを更新したり、後の時点で同じ内容を表示したりする場合に問題を引き起こす可能性があります)。必要な情報がプロセスにとって重要な場合。 フォーム内のエラーのリストについては、Toastの代わりにアラートコンポーネントを使用してください。

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

また、内容に応じてroleとaria-liveのレベルを調整する必要があります。エラーなどの重要なメッセージであればrole="alert" aria-live="assertive"を使い、そうでなければrole="status" aria-live="polite"属性を使います。

表示する内容が変更されたら、時間を確保するためにdelaytimeoutを更新するようにしてください。

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

技術的には、Toastの中にフォーカスやアクションが可能なコントロール（追加のボタンやリンクなど）を追加することは可能ですが、自動非表示のToastではこれを避けるべきです。 Toastに長いdelaytimeoutを与えたとしても、キーボードや支援技術のユーザーが行動を起こすためにToastにたどり着くのは難しいかもしれません（ Toastは表示された時点ではフォーカスを受けないため）。 コントロールが必要な場合は、autohide: falseのトーストを使用することをお勧めします。

CSS

変数

Added in 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属性を使って、toast内のボタンで終了させることができます：

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

または、以下のようにdata-bs-targetを使ってtoastの外側のボタンに追加します：

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

オプション

オプションはデータ属性やJavaScriptで渡すことができるので、data-bs-animation="{value}"のように、data-bs-にオプション名を付加することができる。データ属性でオプションを渡す場合は、オプション名の大文字と小文字を"camelCase“から”kebab-case“に変更することを忘れないようにしましょう。例えば、data-bs-customClass="beautifier"の代わりに data-bs-custom-class="beautifier"を使用します。

Bootstrap 5.2.0では、全てのコンポーネントが 実験的 予約データ属性 data-bs-config をサポートしており、JSON文字列として簡単なコンポーネント設定を収容することができます。要素に 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 objectのマージ結果であり、最新のキー値が他の値を上書きする。

Name Type Default Description
animation boolean true アニメーションを有効にする
autohide boolean true 自動で非表示にする
delay number 5000 トーストを隠すまでの時間（ms）

Methods

すべてのAPIメソッドは非同期でトランジションを開始します。 トランジションが開始されるとすぐに、しかし終了する前に、呼び出し元に戻ります。また、遷移中のコンポーネントに対するメソッド呼び出しは無視されます。詳しくはJavaScriptのドキュメントをご覧ください
Method Description
dispose 要素のトーストを非表示にします。トーストはDOM上に残りますが、表示されなくなります。
getInstance DOM要素に関連付けられたトーストのインスタンスを取得できるStaticメソッドです。
例えば：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イベントが発生する前に）呼び出し元に返します。手動でこのメソッドを呼び出す必要があります。

イベント

Event Description
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...
})