PopToastJS

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

GitHub

jsDelivr

デモ

 

使用方法

CDN

CDN経由で読み込めます。Powered by 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('こんにちは!これはPopToastです。');
    
  

オプション

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

    
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

[x] toastを閉じるアイコンの位置を修正
[ ] positionオプションにtop-center, bottom-centerを追加する
[x] positionオプションが上手くいかない問題を修正する