Toasts

Toasts(トースト)では,アラートメッセージを訪問者に通知することができます。

モバイルやデスクトップによって一般化されている通知に似せて設計しています。 flexbox で作られているので, 整列や配置が簡単にできます。

Overview

toast plugin を使用するときに知っておくべきこと：

JavaScriptをソースからビルドする場合は util.js が必要です。
Toasts はパフォーマンス上の理由でオプトインするので, 自分で初期化する必要があります。
Toasts は autohide：false を指定しなければ自動的に非表示になります。

Examples

Basic

拡張性と予測可能な toasts を奨励するため、ヘッダーと本文を作ることを推奨します。 toast-header は display：flexを使っているので, margin と flexbox utilities で内容を簡単に整列させることができます。 toasts は柔軟性があり, マークアップはほとんど必要ありません。解除ボタンを設けることを推奨します。

Hello, world! This is a toast message.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" ><rect fill="#007aff" width="100%" height="100%"/></svg>
    <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 は上部のコンテンツに重なっても見えるように半透明になっています。 backdrop-filter CSS property をサポートしているブラウザでは toasts の下の要素をぼかしています。

Hello, world! This is a toast message.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" ><rect fill="#007aff" width="100%" height="100%"/></svg>
    <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

toasts が複数ある場合は,デフォルトで垂直方向に積み重ねることができます。

See? Just like this.

Heads up, toasts will stack automatically

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" ><rect fill="#007aff" width="100%" height="100%"/></svg>
    <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">
    <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" ><rect fill="#007aff" width="100%" height="100%"/></svg>
    <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でトーストを配置します。右上や,上の中央は通知のためによく使われます。一度にトーストを1つだけ表示する場合は, .toast の位置にスタイルを配置してください。

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">
      <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" ><rect fill="#007aff" width="100%" height="100%"/></svg>
      <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>

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

See? Just like this.

Heads up, toasts will stack automatically

<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">
        <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" ><rect fill="#007aff" width="100%" height="100%"/></svg>
        <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">
        <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" ><rect fill="#007aff" width="100%" height="100%"/></svg>
        <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 utilities を使用して水平や垂直に整列させることもできます。

Hello, world! This is a toast message.

<!-- 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">
      <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" ><rect fill="#007aff" width="100%" height="100%"/></svg>
      <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 は訪問者の行動の中断を意図しています。スクリーンリーダーや同様の支援技術を持つユーザーを支援するため, aria-live region でラップする必要があります。ライブ領域の変更（コンポーネントの挿入/更新など）は, ユーザーのフォーカスを移動したり,中断することなく,スクリーンリーダーによって自動的に通知されます。
toasts 全体が常に単一 (atomic) 単位としてアナウンスされるようにするために aria-atomic =" true " を含めます。 (内容の一部のみを更新すれば問題を引き起こす可能性があります。または後の時点で同じコンテンツを表示している場合）。
必要な情報がプロセスに重要ならば, 例えばフォームのエラーリストなどは, toasts の代わりにalert component を使用してください。
toasts が生成または更新される前にライブ領域がマークアップ存在する必要があります。両方を同時に動的に生成してページに挿入すると、一般的には補助技術によって通知されません。コンテンツに応じて role と aria-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 を使うときはクローズボタンを追加して, ユーザーが toasts を閉じられるようにする必要があります。

Hello, world! This is a toast message.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <svg class="bd-placeholder-img rounded mr-2" width="20" height="20" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" ><rect fill="#007aff" width="100%" height="100%"/></svg>
    <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').toast(option)

Options

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

Name	Type	Default	Description
animation	boolean	true	Apply a CSS fade transition to the toast
autohide	boolean	true	Auto hide the toast
delay	number	`500`	Delay hiding the toast (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.

`$().toast(options)`

ハンドラを要素コレクションにアタッチします。

`.toast('show')`

toasts が実際に表示される前に（ shown.bs.toast イベントが発生する前に）呼び出し元に戻ります。手動でこのメソッドを呼び出す必要があります。

$('#element').toast('show')

`.toast('hide')`

toasts が実際に隠される前に（ hidden.bs.toastイベントが起こる前に）呼び出し元に戻ります。 autohideを false にした場合、このメソッドを手動で呼び出さなければなりません。

$('#element').toast('hide')

`.toast('dispose')`

tasts はDOMに残っていますが、もう表示されません。

$('#element').toast('dispose')

Events

Event Type	Description
show.bs.toast	This event fires immediately when the `show` instance method is called.
shown.bs.toast	This event is fired when the toast has been made visible to the user.
hide.bs.toast	This event is fired immediately when the `hide` instance method has been called.
hidden.bs.toast	This event is fired when the toast has finished being hidden from the user.

$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})

v4.2