JavaScriptのトースト(通知)用ライブラリ「iziToast.js」の利用方法

システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通知)用ライブラリ「iziToast.js」で実装してほしいとの指示があった。使ったことの無いライブラリだったためサンプル及び利用方法をメモ。

サンプル

https://taitan916.info/sample/iziToast.js/

ボタンをクリックすると右上にトーストが表示される筈。

iziToast.js

公式サイト

https://marcelodolza.github.io/iziToast/

Github

https://github.com/marcelodolza/iziToast

CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css">

利用方法

ソースコード

$(function() {

    $(`button`).on(`click`, function(){
        iziToast.info({
            message: 'テストメッセージ',
            position: 'topRight',
        });
    });

});

基本的な使い方

iziToast.【info / success / warning / error】({
    message: 'メッセージ内容',
    position: 'topRight', //表示位置。topLeft / topRight / bottomLeft / bottomRight
    timeout: 5000, //表示するミリ秒数。false指定すると自動的には非表示にならない
});

「info / success / warning / error」部分でトーストの色等が変わる。その他のオプション項目については公式サイトを参照すること。

その他

その他のトースト系ライブラリの記事は以下の通り。

バニラJS対応(jQuery非依存)の通知(トースト)系ライブラリ「Notyf」の利用方法

jQueryの通知メッセージ用ライブラリ「Toastr」の利用方法