メインコンテンツへスキップ

トースト(Toasts) v5.0.0-beta1設定変更

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

目次

トーストは、モバイルとデスクトップオペレーティングシステムによって一般化されたプッシュ通知を模倣するように設計された軽量の通知である。Flexboxで作られているので、整列配置が簡単にできる。

概要(Overview)

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

  • トーストはパフォーマンス上の理由で任意で取得されるため、自分で初期化する必要がある(そのため実行コードが必要)。
  • トーストは autohide: false を指定しなければ自動的に非表示になる。

 

設定例(Example)v5.0.0-beta1設定変更

基本(Basic)

拡張性と予測可能なトーストを奨励するため、ヘッダとボディの設定を推奨。トーストのヘッダはdisplay: flex を使用しており、マージンとFlexboxユーティリティにより簡単にコンテンツを整列可能。

トーストは必要なだけの柔軟性があり、マークアップはほとんど必要ない。少なくとも、トーストされたコンテンツを含む単一の要素が必要であり、閉じるボタンの設定を強く推奨。
※実例としてモーダルを利用してトーストを表示する方法をモーダルでトースト表示に掲載。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<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分前</small>
		<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
	</div>
	<div class="toast-body">
		こんにちは! これはトーストのメッセージです。
	</div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<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分前</small>
		<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<div class="toast-body">
		こんにちは! これはトーストのメッセージです。
	</div>
</div>
【設定】
  • div.toast > {div.toast-header > button.ms-2.mb-1.btn-close閉じるボタン》}《ヘッダ》 + div.toast-body《コンテンツ》
  • プラグインを使ってトーストを閉じるため、閉じるボタンには [data-bs-dismiss="toast"] を入れる
アクセシビリティの設定】
  • エラーのような重要なメッセージの場合は、div.toast に、role="alert"属性(支援技術にアラート(警告情報)の役割を伝える)と aria-live="assertive" 属性(内容が更新されたことをユーザーに即座に伝える)を入れる
  • それ以外の場合は、div.toast に、role="status"属性(支援技術にある種の更新された状態を伝える)と aria-live="polite" 属性(内容が更新されたことをユーザーに適切なタイミングで伝える)を入れる
  • さらにdiv.toast に、aria-atomic="true"属性(コンテンツ変更時の通知箇所が変更箇所を含むブロック単位であることを伝える)を入れる
  • トーストを閉じるボタンとなる button.btn-close に、aria-label 属性(アイコンボタンのラベル)を入れる
【変更履歴】
  • 【v5.0.0-alpha2】
    • 閉じるボタンの設定の変更(.close.btn-closespan[aria-hidden="true"] > &times; が不要に)
  • 【v5.0.0-beta1】
    • data 属性に名前空間 bs を追加
      • [data-dismiss="toast"][data-bs-dismiss="toast"]
    • RTL(右書き)の設定追加に伴い空白ユーティリティのクラス名変更
      • .ml-*.ms-*
      • .mr-*.me-*

半透明(Translucent)

トーストはやや半透明なので、背面との色合いが混ざり合う。backdrop-filter CSSプロパティをサポートするブラウザでは、トーストの背面にある要素をぼかす。

見本

●背景を bg-dark に設定した場合

●背景画像をパターン化した場合

※背景の設定をしない場合(参考)

Bootstrap5.xの設定例 緑背景が変更箇所
<div class="bg-dark p-4">
	<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分前</small>
			<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
		</div>
		<div class="toast-body">
			こんにちは! これはトーストのメッセージです。
		</div>
	</div>
</div>
【設定】
  • .toast の親要素に背景(色、画像)を設定すると、トーストの背景色が混ざり合って表示される(特に .toast-body 部分)
  • backdrop-filter CSSプロパティをサポートするブラウザでは、トーストの背面の要素がぼかされて表示されるので、背景によっては .toast-body 部分のメッセージが見やすくなる

積み重ね(Stacking)v5.0.0-beta1設定変更

トーストをトースト用のコンテナで囲むことで積み重ねられる。これにより、垂直方向に間隔が追加される。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<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">たった今</small>
			<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
		</div>
		<div class="toast-body">
			見る? ちょうどこのような。
		</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秒前</small>
			<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
		</div>
		<div class="toast-body">
			注意喚起、トーストは自動的に積み重なる
		</div>
	</div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<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">たった今</small>
		<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<div class="toast-body">
		見る? ちょうどこのような。
	</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秒前</small>
		<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
			<span aria-hidden="true">&times;</span>
		</button>
	</div>
	<div class="toast-body">
		注意喚起、トーストは自動的に積み重なる
	</div>
</div>
【設定】
  • div.toast-container > {div.toast + div.toast}
【変更履歴】
  • 【v5.0.0-beta1】
    • div.toast-container で囲む設定に変更

カスタムコンテンツ(Custom content)v5.0.0-alpha2設定追加

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

見本
設定例
<div class="toast d-flex align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
	<div class="toast-body">
		こんにちは! これはトーストのメッセージです。
	</div>
	<button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="閉じる"></button>
</div>
【設定】
  • div.toast-header は入れなくても可

または、トーストに追加のコントロールとコンポーネントが追加可能。

見本
設定例
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
	<div class="toast-body">
		こんにちは! これはトーストのメッセージです。
		<div class="mt-2 pt-2 border-top">
			<button type="button" class="btn btn-primary btn-sm">行動する</button>
			<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">閉じる</button>
		</div>
	</div>
</div>
【設定】
  • div.toast-body 内にコンテンツを入れることも可能

配色(Color schemes)v5.0.0-alpha2設定追加

上記の例に基づいて、カラーユーティリティを使用して、さまざまなトーストの配色が可能。ここでは、.toast.bg-primary.text-white を追加し、閉じるボタンに .btn-close-white を追加。エッジをくっきりさせるためデフォルトの境界線を .border-0 で削除。

見本
設定例
<div class="toast d-flex align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
	<div class="toast-body">
		こんにちは! これはトーストのメッセージです。
	</div>
	<button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="閉じる"></button>
</div>
【設定】
  • .toast.bg-{themecolor}.text-{themecolor} を追加
  • 配色によっては、.btn-close(閉じるボタン)に .btn-close-white(白ボタン)を追加

 

位置(Placement)v5.0.0-beta1設定変更

必要とするカスタムCSSでトーストを配置。行末上や上部中央は、通知のためによく使われる。一度にトーストを1つだけ表示する場合は、.toast の位置に位置ユーティリティクラスを設定する。

1. 単独のトーストを行末上に表示

見本
Bootstrap 11分前
こんにちは! これはトーストのメッセージです。
Bootstrap5.xの設定例 緑背景が変更箇所
<div aria-live="polite" aria-atomic="true" class="position-relative">
	<div class="toast position-absolute top-0 end-0 m-3">
		<div class="toast-header">
			<img src="..." class="rounded me-2" alt="">
			<strong class="me-auto">Bootstrap</strong>
			<small>11分前</small>
			<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
		</div>
		<div class="toast-body">
			こんにちは! これはトーストのメッセージです。 
		</div>
	</div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<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分前</small>
			<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="閉じる">
				<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<div class="toast-body">
			こんにちは! これはトーストのメッセージです。 
		</div>
	</div>
</div>
【設定】
  • トーストを囲むコンテナに .position-relative(相対位置)を、.toast.position-absolute(絶対位置)と位置ユーティリティクラス(使用クラスは定義済みクラスの組み合わせを参照)を追加
  • [aria-live], [aria-atomic].toast ではなく、コンテナに設定
【変更履歴】

2. 複数のトーストを行末上に表示

より多くの通知を生成するシステムでは、簡単に積み重なるようにラッピング要素を使用すること。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div aria-live="polite" aria-atomic="true" class="position-relative">
	<!-- 配置する -->
	<!-- トースト間の間隔用 `.toast-container` -->
	<!-- `.position-absolute`, ` top-0`& `end-0`で、トーストを行末上隅に配置 -->
	<!-- トーストがコンテナの端にくっつくのを防ぐための `.p-3` -->
	<div class="toast-container position-absolute top-0 end-0 p-3">

		<!-- その後、トーストを入れる -->
		<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">たった今</small>
				<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
			</div>
			<div class="toast-body">
				見る? ちょうどこのような。
			</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秒前</small>
				<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
			</div>
			<div class="toast-body">
				注意喚起、トーストは自動的に積み重なる 
			</div>
		</div>
	</div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
	<div style="position: absolute; top: 0; right: 0;">
		...
	</div>
</div>
【設定】
  • トーストを囲む外コンテナに .position-relative(相対位置)、.toast-container(内コンテナ)に .position-absolute(絶対位置)と位置ユーティリティクラス(使用クラスは定義済みクラスの組み合わせを参照)を追加(.toast には設定しない)
【変更履歴】

3. Flexユーティリティクラスを使って上下左右中央に表示

また、Flexboxユーティリティを使ってトーストを水平や垂直に配置させることも可能。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<!-- トースト配置用のFlexboxコンテナ-->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

	<!-- その後、トーストを入れる -->
	<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分前</small>
			<button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
		</div>
		<div class="toast-body">
			こんにちは! これはトーストのメッセージです。 
		</div>
	</div>
</div>
【設定】

 

アクセシビリティ(Accessibility)

トーストは、訪問者やユーザーの中断が少ないように意図されているため、スクリーンリーダや同様の補助技術を持つ人を助けるために、トライアルを aria-live region で囲む必要がある。ライブリージョンの変更(トーストコンポーネントの挿入/更新など)は、ユーザーのフォーカスを移動したりユーザーを中断することなく、スクリーンリーダーによって自動的に通知される。さらに、変更されたものを通知するのではなく(トーストのコンテンツの一部のみを更新した場合や、後で同じトーストコンテンツを表示する場合に問題を引き起こす可能性がある)、トースト全体が単一の(アトミック)単位として常に通知されるようにするには、aria-atomic="true" を追加する。プロセスに必要な情報が重要な場合(例:フォーム内のエラーのリスト)については、トーストの代わりにアラートコンポーネントを使用すること。

トーストが生成や更新されるに、ライブリージョンがマークアップ内に存在する必要があることに注意すること。両方を同時に動的に生成してページに挿入すると、一般的には補助技術によって通知されない。

また、コンテンツに応じて rolearia-live レベルを調整する必要がある。エラーのような重要なメッセージの場合は、role="alert" aria-live="assertive" を使用し、それ以外の場合は、role="status" aria-live="polite" 属性を使用する。

表示しているコンテンツが変更された場合は、delay 時間を更新して、トーストを読むのに十分な時間を確保すること。

Bootstrap5.xの設定例(10秒後に非表示にする設定) 緑背景が変更箇所
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="10000">
	...
</div>

autohide: false を使用する場合は、閉じるボタンを追加して、ユーザーがトーストを閉じられるようにする必要がある。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
	<div class="toast-header">
		<img src="..." class="rounded me-2" alt="">
		<strong class="me-auto">Bootstrap</strong>
		<small>11分前</small>
		<button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="閉じる"></button>
	</div>
	<div class="toast-body">
		こんにちは! これはトーストのメッセージです。 
	</div>
</div>

 

JavaScriptの動作(JavaScript behavior)

使用方法(Usage)v5.0.0-alpha1設定変更

JavaScriptでトーストを初期化する:

Bootstrap5.xの設定例
JavaScriptvar toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
  return new bootstrap.Toast(toastEl, option)
})
※Bootstrap4.xの設定例
JavaScript$('.toast').toast(option)
【変更履歴】
  • 【v5.0.0-alpha1】
    • JavaScriptの設定がjQueryに依存しない方法に変更

オプション(Options)

オプションは、データ属性かJavaScriptを使用して渡すことが可能。データ属性の場合、data-bs-animation="" のように、data-bs- にオプション名を追加。

名前 タイプ デフォルト 説明
animation boolean true トーストにCSSフェード遷移を適用
true:有効/false:無効
autohide boolean true トーストを自動的に非表示
true:有効/false:無効
delay number 5000 v5.0.0-alpha2変更 トーストの非表示の遅延時間(1000分の1秒単位)

【変更履歴】

  • 【v5.0.0-alpha2】
    • delay のデフォルトが 500(0.5秒)から 5000(5秒)に変更

メソッド(Methods)v5.0.0-alpha1設定変更

show

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

JavaScripttoast.show()

hide

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

JavaScripttoast.hide()

dispose

要素のトーストを非表示にする。トーストはDOMには残っているが、再表示できない。

JavaScripttoast.dispose()
【変更履歴】
  • 【v5.0.0-alpha1】
    • $().toast('xxx')toast.xxx()

イベント(Events)

イベントタイプ 説明
show.bs.toast show インスタンスメソッドが呼び出されるとすぐに発動。
shown.bs.toast トーストがユーザーに表示されたら発動。
hide.bs.toast hide インスタンスメソッドが呼び出されるとすぐに発動。
hidden.bs.toast トーストがユーザーから非表示になったら発動。
使用例 v5.0.0-alpha1設定変更
JavaScriptvar myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
	// 何かをする...
})