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

Post on:2019年7月10日

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

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

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

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

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

<script type="module">
import 'std:elements/toast';
</script>

<std-toast id="sample-toast" type="info">
    Hello World!
</std-toast>

import 'std:elements/toast';

</script>

<std-toast id="sample-toast" type="info">

Hello World!

</std-toast>

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

import { showToast } from 'std:elements/toast';

const toast = showToast("Hello World!", {
    type: "info",
    duration: 3000
});

import { showToast } from 'std:elements/toast';

const toast = showToast("Hello World!", {

type: "info",

duration: 3000

});

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

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