in English

トースト

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

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

概要

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

  • JavaScript をソースからビルドする場合はutil.js、 .
  • トーストはパフォーマンス上の理由からオプトインであるため、自分で初期化する必要があります。
  • トーストを配置する責任があることに注意してください。
  • 指定しない場合、トーストは自動的に非表示になりますautohide: false。
このコンポーネントのアニメーション効果は、 prefers-reduced-motionメディア クエリに依存します。アクセシビリティ ドキュメントの縮小モーション セクションを参照してください 。

例

基本

拡張可能で予測可能なトーストを促進するために、ヘッダーと本文をお勧めします。トースト ヘッダーは を使用display: flexし、margin および flexbox ユーティリティのおかげでコンテンツを簡単に配置できます。

トーストは必要なだけ柔軟で、必要なマークアップはほとんどありません。少なくとも、「トースト」コンテンツを含む 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>

ライブ

下のボタンをクリックして、デフォルトで非表示になっているトーストを表示します (ユーティリティは右下隅にあります) .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>

半透明

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

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

ブートストラップ 11分前
こんにちは世界！これは乾杯のメッセージです。 
<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 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"何が変更されたかを通知するだけでなく、トースト全体が常に 1 つの (アトミック) ユニットとして通知されるようにするために含めます (トーストのコンテンツの一部のみを更新する場合や、同じトースト コンテンツを表示する場合に問題が発生する可能性があります)。後の時点で）。フォーム内のエラーのリストなど、必要な情報がプロセスにとって重要な場合は、アラート コンポーネントを使用します。トーストの代わりに。

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

また、コンテンツに応じて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場合は、閉じるボタンを追加して、ユーザーがトーストを閉じられるようにする必要があります。

<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=""。

名前 タイプ デフォルト 説明
アニメーション ブール値 真実 トーストに CSS フェード トランジションを適用する
自動非表示 ブール値 真実 トーストを自動的に隠す
遅れ 番号 500 トーストを非表示にする遅延 (ミリ秒)

メソッド

非同期メソッドと遷移

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

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

$().toast(options)

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

.toast('show')

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

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

.toast('hide')

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

$('#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...
})