トースト、軽量で簡単にカスタマイズ可能なアラート メッセージを使用して、訪問者にプッシュ通知を送信します。
トーストは、モバイルおよびデスクトップ オペレーティング システムで普及しているプッシュ通知を模倣するように設計された軽量の通知です。フレックスボックスで構築されているため、位置合わせと配置が簡単です。
概要
toast プラグインを使用する際に知っておくべきこと:
- JavaScript をソースからビルドする場合は
util.js
、 .
- トーストはパフォーマンス上の理由からオプトインであるため、自分で初期化する必要があります。
- トーストを配置する責任があることに注意してください。
- 指定しない場合、トーストは自動的に非表示になります
autohide: false
。
このコンポーネントのアニメーション効果は、prefers-reduced-motion
メディア クエリに依存します。アクセシビリティ ドキュメントの縮小モーション セクションを参照してください。
例
基本
拡張可能で予測可能なトーストを促進するために、ヘッダーと本文をお勧めします。トースト ヘッダーは を使用display: flex
し、margin および flexbox ユーティリティのおかげでコンテンツを簡単に配置できます。
トーストは必要なだけ柔軟で、必要なマークアップはほとんどありません。少なくとも、「トースト」コンテンツを含む 1 つの要素が必要であり、閉じるボタンを強く推奨します。
半透明
トーストもわずかに半透明なので、何に重ねても溶け込みます。CSS プロパティをサポートするブラウザーの場合backdrop-filter
、トーストの下の要素をぼかすことも試みます。
スタッキング
複数のトーストがある場合、デフォルトでは読みやすいように垂直方向にスタックされます。
配置
必要に応じて、カスタム CSS を使用してトーストを配置します。右上は通知によく使用され、上部中央も同様です。一度に 1 つのトーストのみを表示する場合は、配置スタイルを.toast
.
より多くの通知を生成するシステムの場合は、簡単にスタックできるようにラッピング要素を使用することを検討してください。
トーストを水平方向および/または垂直方向に整列させるフレックスボックス ユーティリティを使用することもできます。
アクセシビリティ
トーストは、訪問者やユーザーに小さな中断を与えることを目的としているため、スクリーン リーダーや同様の支援技術を使用しているユーザーを支援するために、aria-live
リージョンでトーストをラップする必要があります。ライブ リージョンへの変更 (トースト コンポーネントの注入/更新など) は、スクリーン リーダーによって自動的に通知されます。ユーザーのフォーカスを移動したり、ユーザーを中断したりする必要はありません。さらに、aria-atomic="true"
何が変更されたかを通知するのではなく、トースト全体が常に 1 つの (アトミック) ユニットとして通知されるようにするために含めます (これは、トーストのコンテンツの一部のみを更新する場合や、同じトースト コンテンツを後の時点)。フォーム内のエラーのリストなど、必要な情報がプロセスにとって重要な場合は、アラート コンポーネントを使用します。トーストの代わりに。
トーストが生成または更新される前に、ライブ リージョンがマークアップに存在する必要があることに注意してください。両方を同時に動的に生成してページに挿入した場合、通常、それらは支援技術によって通知されません。
また、コンテンツに応じてrole
とレベルを調整する必要があります。aria-live
エラーのような重要なメッセージの場合は を使用しrole="alert" aria-live="assertive"
、それ以外の場合はrole="status" aria-live="polite"
属性を使用します。
表示するコンテンツが変更されたら、必ずdelay
タイムアウトを更新して、ユーザーがトーストを読むのに十分な時間を確保できるようにしてください。
を使用するautohide: false
場合は、閉じるボタンを追加して、ユーザーがトーストを閉じられるようにする必要があります。
JavaScript の動作
使用法
JavaScript を介してトーストを初期化します。
オプション
オプションは、データ属性または JavaScript を介して渡すことができます。data-
データ属性の場合、オプション名をのようにに追加しますdata-animation=""
。
名前 |
タイプ |
デフォルト |
説明 |
アニメーション |
ブール値 |
真実 |
トーストに CSS フェード トランジションを適用する |
自動非表示 |
ブール値 |
真実 |
トーストを自動的に隠す |
遅れ |
番号 |
500 |
トーストを非表示にする遅延 (ミリ秒) |
メソッド
$().toast(options)
トースト ハンドラーを要素コレクションにアタッチします。
.toast('show')
要素のトーストを表示します。トーストが実際に表示される前 (つまり、イベントが発生する前)に呼び出し元に戻ります。shown.bs.toast
このメソッドを手動で呼び出す必要があります。代わりに、トーストは表示されません。
.toast('hide')
要素のトーストを非表示にします。トーストが実際に非表示になる前 (つまり、イベントが発生する前)に呼び出し元に戻ります。を作成したhidden.bs.toast
場合は、このメソッドを手動で呼び出す必要があります。autohide
false
.toast('dispose')
要素のトーストを非表示にします。トーストは DOM に残りますが、表示されなくなります。
イベント
イベントタイプ |
説明 |
show.bs.toast |
show このイベントは、インスタンス メソッドが呼び出されるとすぐに発生します。 |
shown.bs.toast |
このイベントは、トーストがユーザーに表示されるようになったときに発生します。 |
hide.bs.toast |
hide このイベントは、インスタンス メソッドが呼び出されるとすぐに発生します。 |
hidden.bs.toast |
このイベントは、トーストがユーザーから非表示になったときに発生します。 |