バニラJS対応(jQuery非依存)の通知(トースト)系ライブラリ「Notyf」の利用方法
以前に通知(トースト)系ライブラリ「Toastr」の利用方法をメモしたが、こちらはjQueryが必須となる。できればバニラJSでも使えるようなライブラリが無いか探したところ「Notyf」が軽量且つシンプルで使いやすそうだった。以下にサンプルと利用方法をメモ。
目次
Notyf
公式サイト
GitHub
https://github.com/caroso1222/notyf
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdnjs.cloudflare.com/ajax/libs/notyf/3.10.0/notyf.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/notyf/3.10.0/notyf.min.css">
異なるバージョンを利用したい場合は以下から探す。
https://cdnjs.com/libraries/notyf
サンプル
https://taitan916.info/sample/Notyf/
利用方法
ソースコード
<script> //通常の通知 const option = { duration: 0, //表示秒数をミリ秒で指定(0にすると非表示にならない) dismissible: true, //閉じるボタンの表示 position: {x:'right', y:'top'}, //表示位置 types: [ //カスタム通知用の設定 { type: 'custom', background: '#4169e1', icon: { className: 'fa-solid fa-house', tagName: 'i', color: '#fff' } } ] }; const notyf = new Notyf(option); //通常の通知 notyf.error(`error通知`); notyf.success(`success通知`); //カスタム通知 notyf.open({ type: 'custom', message: 'カスタム通知<br>改行', }); </script>
解説等
通常の通知
通常の通知については以下構文で実行できる。
notyf.【通知レベル(error等)】(`【本文】`);
カスタム通知
カスタム通知について基本的にはこちらのページを参照すること。
また、サンプルページの場合Font Awesomeのアイコンを使用しているためCSSをCDN呼び出しした上で、アイコンのclassを「className: fa-solid fa-house」と指定している。
通知部分の横幅
通知部分の横幅(width)についてmax-widthは指定されているがmin-widthは指定されていない。そのため通知本文が短い場合は表示横幅が異なる場合があり見た目的に微妙かも。
そこが気になる場合は以下のようにCSSで指定すること。
<style> .notyf__toast{ min-width: 300px; } </style>
オプション項目
各種オプション設定についてはこちらのページを参照すること。
関連記事
-
-
JavaScriptで後から追加した要素にイベントを割り当てる方法と挙動の違いについて
jQueryで後から追加した要素に対してイベントを割り当てる場合、いつもと異なる ...
-
-
JavaScriptのリッチなalert / confirmぽいウィンドウを表示する「sweetalert2」の利用方法
JavaScriptのalert / confirmはブラウザによって表示位置や ...
-
-
JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について
JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...
-
-
javascriptで画像を取り扱う際の注意
javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...
-
-
バニラJavaScriptでリッチなセレクトメニュー(プルダウン)を実装できる「Choices.js」の利用方法
サジェストや複数選択等、機能付きのセレクトメニュー(プルダウン)を実装する際、今 ...