HTMLに新しい要素ができる動き、ポップアップする通知パネル用のtoast要素

ブラウザの枠外からポップアップやスライドして表示される通知パネルを実装するために、HTMLの新しい要素<toast>ができるかもしれません。

ブラウザへの実装日はまだ決まっていませんが、Chromiumの開発者が提案しているので、けっこう早くに実装されるかもしれませんね。

サイトのキャプチャ

Toast UI element -Chrome Platform Status

UI要素としてのトーストとは

UI要素としてのトーストは、最近のWebサイトやスマホアプリでもかなり多く見かけます。トーストを実装するためのライブラリも数多く存在します。

名前の由来は、通知パネルの表示アニメーションがトースターからトーストがでてくる感じだからでしょう。

Notyf

React-Toastify

Toast -Blueprint

toast要素の提案内容

toast要素の提案内容は、下記にまとめられています。

サイトのキャプチャ

A Standard 'Toast' UI Element

現時点では、トーストは2つの実装パターンが想定されています。
1つ目はタグには<std-toast>を使用して実装します。属性にはopen, type, potision, closebuttonなどがあります。

2つ目はstd:elements/toastモジュールからshowToast()関数をインポートします。

dialog要素との違い

トーストとダイアログは、アクセシビリティの観点で異なります。ダイアログは通常のフローを絶つ振る舞いをしますが、トーストは通常のフローはそのままです。

トーストは一時的なコンテキスト固有のメッセージであることを意図しており、ユーザーが利用しているフローを妨げるものではありません。

参考:
HTML 5.2で新しく登場した<dialog>要素で、ダイアログ ボックスを実装する方法と注意点

sponsors

top of page

©2019 coliss