オシャレなtoastが簡単に実装出来るjsプラグイン「iziToast」



オシャレなtoast ( 通知バー ) が簡単に実装出来るJavascriptプラグイン「iziToast」の紹介です。

toastというポップアップをご存知でしょうか?
" toast "というのは動的にポップアップバーで、主に自動的に消える新着情報通知などで使われている印象があります。

Bootstrapでは、アラートやモーダルと言ったダイアログが用意されていますが、" Materialize " や " uikit "等のモダンなCSSフレームワークでは" toast "がデフォルトで用意されています。

そんなtoastですが、他ライブラリ非依存で簡単に使えるJavascriptライブラリが" iziToast "です。

iziToastを実際に使ってみたGif動画


iziToastのインストール

iziToastのインストールはこちらの公式ページからダウンロードする方法の他、パッケージマネージャーを使っての導入にも対応しています。

# npm 
npm install izitoast --save

# bower
bower install izitoast


iziToastの使い方

<!-- ブラウザ上でライブラリの読み込み -->
<link rel="stylesheet" href="/izitoast/dist/css/iziToast.min.css">
<script src="/izitoast/dist/js/iziToast.min.js></script>


iziToastの基本的な使い方は、プロパティの ' title '  に toastのタイトル ' message ' に表示させたい本文を割り当てて使います。
( デフォルトでは5秒で自動的にtoastが非表示にされます * 設定で変更可 )

Bootstrapをお使いの人には馴染みがあると思いますが、
iziToastにはデフォルトで ' info ' ' success ' ' warning ' ' error ' の4種類のデザインが用意されています。

// info
iziToast.info({ title: 'Infoカラー', message: 'iziToast.info()' });
// success
iziToast.success({ title: 'Successカラー', message: 'iziToast.success()' });
// warning
iziToast.warning({ title: 'Warningカラー', message: 'iziToast.warning()!' });
// error
iziToast.error({ title: 'Errorカラー', message: 'iziToast.error()' });

* デフォルトで用意されているカラー (  * アイコンも標準でセットされています )

上の4種類のtoastで だいたいは事足りるのですが、カスタムtoastも作成することが出来ます。アイコンや背景色を変更するのは勿論のこと、toast内にボタンを追加してconfirm処理をさせたり等など。。

* カスタムtoast

// カスタムtoast
iziToast.show({
    color: 'dark', // 背景色
    icon: 'fa fa-user', // font-awesomeのアイコンに変更
    title: 'Hey', // タイトル
    message: 'Custom Toast!', // メッセージ
    position: 'center', // 中央にtoastを表示
    progressBarColor: 'rgb(0, 255, 184)', // 進歩バー色
    // ボタンを追加
    buttons: [
        [
            '<button>Ok</button>',
            // ボタンをクリックした際のコールバック
            function(instance, toast) {
                alert("Hello world!");
            }
        ],
        [
            '<button>Close</button>',
            // ボタンをクリックした際のコールバック
            function(instance, toast) {
                // closeボタンでiziToastを非表示に
                instance.hide({
                    transitionOut: 'fadeOutUp'
                }, toast);
            }
        ]
    ]
});  // ! iziToast.show()


iziToastはデフォルトでページ右下にポップアップが表示されますが、' settings ' 関数を使うことでtoastが消える秒数を変更したり、様々な初期設定が可能になります。記述方法は上記で説明したカスタムボタンとよく似ており、全体に設定を繁栄させたい時に便利に使えます。

// settings関数で初期設定 全体に適応させたい場合
iziToast.settings({
  timeout: 3000, // ボタンが消えるタイミング
  resetOnHover: true, // マウスホバーした時に処理を止めるオプション
  icon: 'fa fa-success', // iconのクラス *font-awesomeのアイコンを使いたい場合など
  transitionIn: 'flipInX', // 表示される時のアニメーション
  transitionOut: 'flipOutX', // 非表示にされる時のアニメーション
  position: 'topRight', // 表示するポジション bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
  onOpen: function () {
    // toastが表示された時のコールバック
    console.log('callback show!');
  },
  onClose: function () {
    // toastが非表示にされる時のコールバック
    console.log("callback close!");
  }
});


Summary

以上がiziToastの紹介でした。

toastはアラートやモーダル等と違った使い方が可能で、pubsubなどが噛んでくる、リアルタイムにメッセージを表示させたい時に使用すると使い勝手が良い印象を受けました。

* 実際にiziToastを使ったデモ

See the Pen iziToast demo by cupof (@cupof-github) on CodePen.


ライブラリ非依存なので、Bootstrapや他のCSSフレームワーク、既存のサイト上でも問題無く使えるのが良いですね。

GitHub : dolce/iziToast

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ