GitHubで表示

トースト

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

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

概要

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

ソースからJavaScriptを構築している場合、util.jsが必要です。
パフォーマンス上の理由から、トーストはオプトインとなっています。そのため、**自分で初期化する必要があります**。
トーストの位置付けはユーザーの責任であることに注意してください。
autohide: falseを指定しない場合、トーストは自動的に非表示になります。

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

例

基本

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

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

Hello, world! これはトーストメッセージです。

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

ライブ

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

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <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>

半透明

トーストは、下にあるものと調和するようにわずかに半透明です。

Hello, world! これはトーストメッセージです。

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

スタッキング

複数のトーストがある場合、デフォルトでは読みやすいように垂直にスタックされます。

ほらね？このように。

念のため、トーストは自動的にスタックされます。

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

配置

必要に応じてカスタムCSSでトーストを配置します。右上は通知によく使用されますが、中央上も同様です。一度に1つのトーストだけを表示する場合は、.toastに配置スタイルを直接記述します。

Hello, world! これはトーストメッセージです。

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

フレックスボックスユーティリティを使用して、トーストを水平方向および/または垂直方向に整列することもできます。

Hello, world! これはトーストメッセージです。

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="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>

アクセシビリティ

トーストは訪問者またはユーザーにとって小さな中断を意図したものであるため、スクリーンリーダーや同様の支援技術を使用するユーザーを支援するために、トーストを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-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

autohide: falseを使用する場合は、ユーザーがトーストを閉じることができるように閉じるボタンを追加する必要があります。

Hello, world! これはトーストメッセージです。

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

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

JavaScriptの動作

使用方法

JavaScriptを介してトーストを初期化する

$('.toast').toast(option)

オプション

オプションは、データ属性またはJavaScriptを介して渡すことができます。データ属性の場合、data-にオプション名を付加します（例：data-animation=""）。

名前	型	デフォルト	説明
animation	boolean	true	トーストにCSSフェードトランジションを適用する
autohide	boolean	true	トーストを自動的に非表示にする
delay	number	`500`	トーストの非表示を遅らせる（ms）

メソッド

非同期メソッドとトランジション

すべてのAPIメソッドは**非同期**であり、**トランジション**を開始します。トランジションが開始されるとすぐに呼び出し元に返されますが、**終了する前**です。さらに、**トランジション中のコンポーネントへのメソッド呼び出しは無視されます**。

詳細については、JavaScriptドキュメントを参照してください。.

`$().toast(options)`

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

`.toast('show')`

要素のトーストを表示します。**トーストが実際に表示される前（つまり、shown.bs.toastイベントが発生する前）に呼び出し元に返されます**。手動でこのメソッドを呼び出す必要があります。そうでなければ、トーストは表示されません。

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

`.toast('hide')`

要素のトーストを非表示にします。**トーストが実際に非表示になる前（つまり、hidden.bs.toastイベントが発生する前）に呼び出し元に返されます**。autohideをfalseにした場合は、手動でこのメソッドを呼び出す必要があります。

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

`.toast('dispose')`

要素のトーストを非表示にします。トーストはDOMに残りますが、表示されなくなります。

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

イベント

イベントタイプ	説明
show.bs.toast	このイベントは、`show`インスタンスメソッドが呼び出されるとすぐに発生します。
shown.bs.toast	このイベントは、トーストがユーザーに対して表示可能になったときに発生します。
hide.bs.toast	このイベントは、`hide`インスタンスメソッドが呼び出されるとすぐに発生します。
hidden.bs.toast	このイベントは、トーストがユーザーから非表示になったときに発生します。

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