PopToastJS

美しいtoastをカンタンに表示するためのJavaScriptライブラリ

デモ

使用方法

CDN

CDN経由で、PopToastJSのCSSとJSを読み込むことができます。jsDelivrによって提供されています。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AbeShunyah/PopToastJS@main/poptoast.min.css">
<script src="https://cdn.jsdelivr.net/gh/AbeShunyah/PopToastJS@main/poptoast.min.js"></script>

コード

toastを表示するには、以下のようにコードを記述します。

const toast = new PopToast();
toast.show('こんにちは！');

オプション

第二引数にオプションを指定することでカスタマイズできます。

const toast = new PopToast();
toast.show('オプションでカスタマイズされたPopToastです。', {
  type: "error", //success, warning, error, info
  duration: 5000, //表示時間。ミリ秒
  position: "bottom-left", //表示位置。top-left, top-right, bottom-left, bottom-right
  closeable: false, //閉じるアイコンを表示するかどうか
  style: {
    color: "blue", //追加スタイル
  },
}});

開発ToDo