トースト（Toasts） v4.2.1新設

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

概要（Overview）

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

• JavaScriptをソースから構築する場合は、util.jsが必要。
• トーストはパフォーマンス上の理由で任意で取得されるため、自分で初期化する必要がある（そのため実行コードが必要）。
• トーストの位置取りは各自手動で行うこと（※位置の項目を参照）。
• トーストは autohide: false を指定しなければ自動的に非表示になる。

JavaScript$('.toast')
	.toast({
		autohide: false
	})
	.toast('show')

実例（Example）

基本（Basic）

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

トーストは必要なだけの柔軟性があり、マークアップはほとんど必要ない。少なくとも、トーストされたコンテンツを含む単一の要素が必要であり、閉じるボタンの設定を強く推奨。

見本

設定例

コピー<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
	<div class="toast-header">
		<img src="..." alt="..." class="rounded mr-2">
		<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>

ライブ（Live）v4.6.0新設

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

見本

設定例

HTMLコピー<button type="button" class="btn btn-primary" id="liveToastBtn">トーストを表示</button>

<div class="position-fixed 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="..." alt="..." class="rounded mr-2">
			<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>

JavaScriptコピー$('#liveToastBtn').click(function () {
	$('#liveToast').toast('show')
})

半透明（Translucent）

トーストはやや半透明なので、背面との色合いが混ざり合う。

見本

設定例

コピー<div class="bg-dark p-4">
	<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
		<div class="toast-header">
			<img src="..." alt="..." class="rounded mr-2">
			<strong class="mr-auto">Bootstrap</strong>
			<small class="text-muted">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>

縦積み（Stacking）

トーストが複数ある場合は、デフォルトでは垂直方向に積み重なる。

見本

設定例

コピー<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
	<div class="toast-header">
		<img src="..." alt="..." class="rounded mr-2">
		<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="..." alt="..." class="rounded mr-2">
		<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>

位置（Placement）

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

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

見本

設定例

コピー<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="..." alt="..." class="rounded mr-2">
			<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>

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

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

見本

設定例

コピー<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
	<!-- 配置する -->
	<div style="position: absolute; top: 0; right: 0;">

		<!-- その後、トーストを入れる -->
		<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
			<div class="toast-header">
				<img src="..." alt="..." class="rounded mr-2">
				<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="..." alt="..." class="rounded mr-2">
				<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>
</div>

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

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

見本

設定例

コピー<!-- トースト配置用のFlexboxコンテナ-->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">

	<!-- その後、トーストを入れる -->
	<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
		<div class="toast-header">
			<img src="..." alt="..." class="rounded mr-2">
			<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>

アクセシビリティ（Accessibility）

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

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

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

表示するコンテンツが変更されたら、delay タイムアウトを更新して、ユーザーがトーストを読むのに十分な時間を確保すること。

設定例（10秒後に非表示にする設定）

コピー<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="10000">
	...
</div>

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

見本

設定例

コピー<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
	<div class="toast-header">
		<img src="..." alt="..." class="rounded mr-2">
		<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>

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

JavaScriptの動作（JavaScript behavior）

使用方法（Usage）

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

設定例

コピー$('.toast').toast(option)

オプション（Options）

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

メソッド（Methods）

$().toast(options)

要素コレクションにトーストのハンドラを付ける。

.toast('show')

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

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

.toast('hide')

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

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

.toast('dispose')

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

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

イベント（Events）

使用例

JavaScript$('#myToast').on('hidden.bs.toast', function () {
	// 何かをする...
})