Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Toasts (トースト)

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

目次

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

Overview

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

The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

Examples

Basic

Toasts の拡張性と予測可能性を高めるために、ヘッダと本文を推奨します。Toasts のヘッダは display: flex を使用しており、 margin と flexbox ユーティリティによりコンテンツを簡単に整列させることができます。 Toasts は必要に応じて柔軟に対応でき、必要なマークアップはほとんどありません。最低限、“Toasts” コンテンツを含む要素を1つだけ必要とし、却下ボタンを強く推奨します。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Translucent

Toasts は半透明なので、上に表示されるものは何でも溶け込みます。CSS プロパティ backdrop-filter をサポートしているブラウザでは、Toast の下にある要素をぼかしてみます。

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

Stacking

Toast が複数ある場合は、読みやすいように縦に重ねるのがデフォルトになっています。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

Placement

必要に応じてカスタムCSSで配置します。右上は通知用に使われることが多く、中上も同様です。一度に一つの Toast しか表示しない場合は、配置スタイルを .toast の右に配置してください。

Bootstrap 11 mins ago
Hello, world! This is a toast message.
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

flexbox ユーティリティを使って、Toast を水平方向や垂直方向に整列させることもできます。

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

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

Accessibility

Toasts はユーザーのページ閲覧の中断を意味するので、スクリーンリーダーや同様の支援技術を使用しているユーザーを支援するには、Toast を aria-live region でラップする必要があります。
ライブ領域への変更( Toastの挿入/更新など )は、ユーザーのフォーカスを移動したり、ユーザーを中断したりする必要なく、スクリーンリーダーによって自動的に通知されます。
さらに、 aria-atomic =" true "を含めて、変更内容を通知するのではなく、トースト全体が常に1つの(アトミック)ユニットとしてアナウンスされるようにします (これは、トーストの内容の一部だけを更新したり、後の時点で同じ内容を表示したりする場合に問題を引き起こす可能性があります)。
必要な情報がプロセスにとって重要な場合。 フォーム内のエラーのリストについては、Toast の代わりにalert component を使用してください。
ライブリージョンは、Toast が生成されたり更新されたりする前に、マークアップに存在する必要があることに注意してください。両方を同時に動的に生成してページに注入した場合、一般的には支援技術によってアナウンスされることはありません。また、内容に応じて rolearia-live のレベルを調整する必要があります。エラーなどの重要なメッセージであれば role="alert" aria-live="assertive" を使い、そうでなければ role="status" aria-live="polite" 属性を使います。表示する内容が変更されたら、時間を確保するために delay timeout を更新するようにしてください。

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-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-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

JavaScript behavior

Usage

JavaScriptで Toast を初期化します。

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

Options

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

Name Type Default Description
animation boolean true CSSのフェードトランジションを適用します。
autohide boolean true 自動非表示
delay number 500 非表示するまでの時間(ms)

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

show

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

toast.show()

hide

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

toast.hide()

dispose

Toast 要素を隠します。Toast は DOM 上に残りますが、表示されなくなります。

toast.dispose()

Events

Event type Description
show.bs.toast showインスタンスメソッドが呼び出されたときに発生します。
shown.bs.toast Toast がユーザに表示されたときに発生します。
hide.bs.toast hideインスタンスメソッドが呼び出されたときに発生します。
hidden.bs.toast Toast の非表示が終了したときに発生します。
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})