in English

トースト

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

このページでは

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

概要

toast プラグインを使用する際の注意事項:

トーストはパフォーマンス上の理由からオプトインであるため、自分で初期化する必要があります。
指定しない場合、トーストは自動的に非表示になります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 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。

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

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" class="toast hide" 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>

半透明

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

こんにちは世界！これは乾杯のメッセージです。

<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-muted">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 class="toast-container">
  <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-muted">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-muted">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>

カスタムコンテンツ

サブコンポーネントを削除したり、ユーティリティで微調整したり、独自のマークアップを追加したりして、トーストをカスタマイズします。ここでは、デフォルトのを削除し、Bootstrap Icons.toast-headerからカスタムの非表示アイコンを追加し、いくつかのフレックスボックスユーティリティを使用してレイアウトを調整することで、よりシンプルなトーストを作成しました。

こんにちは世界！これは乾杯のメッセージです。

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

または、追加のコントロールとコンポーネントをトーストに追加することもできます。

こんにちは世界！これは乾杯のメッセージです。

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

配色

上記の例に基づいて、色と背景のユーティリティを使用して、さまざまなトーストの配色を作成できます。ここでは、に.bg-primaryとを追加してから、閉じるボタンに追加しています。鮮明なエッジを得るために、デフォルトの境界線をで削除します。.text-white.toast.btn-close-white.border-0

こんにちは世界！これは乾杯のメッセージです。

<div class="toast align-items-center text-white 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.

こんにちは世界！これは乾杯のメッセージです。

<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-dark position-relative bd-example-toasts">
  <div class="toast-container position-absolute 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>

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

見る？ちょうどこのような。

注意、トーストは自動的にスタックされます

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `.position-absolute`, `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 position-absolute 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-muted">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-muted">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 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>

アクセシビリティ

トーストは、訪問者やユーザーに小さな中断を与えることを目的としているため、スクリーンリーダーや同様の支援技術を使用しているユーザーを支援するために、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-bs-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-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>

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

サス

変数

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba(0, 0, 0, .05);

使用法

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

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

オプション

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

名前	タイプ	デフォルト	説明
`animation`	ブール値	`true`	トーストに CSS フェードトランジションを適用する
`autohide`	ブール値	`true`	トーストを自動的に隠す
`delay`	番号	`5000`	トーストを非表示にする遅延 (ミリ秒)

メソッド

非同期メソッドと遷移

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

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

見せる

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

toast.show()

隠れる

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

toast.hide()

廃棄

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

toast.dispose()

getInstance

DOM 要素に関連付けられた scrollspy インスタンスを取得できる静的メソッド

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

DOM 要素に関連付けられた scrollspy インスタンスを取得したり、初期化されていない場合に新しいインスタンスを作成したりできる静的メソッド

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

イベント

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

var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})