バニラ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>
オプション項目
各種オプション設定についてはこちらのページを参照すること。
関連記事
-
-
jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法
jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAja ...
-
-
JavaScriptにて「loglevel」ライブラリを利用して環境及びレベルによりログを出し分けする方法
JavaScriptにて何らかの確認の際にconsole.logを使うことが多い ...
-
-
無料でシンプルなアイコンを設置できる「Feather」の利用方法
ページ上にアイコンを表示したい場合Font Awesomeを使うことが多いが、個 ...
-
-
jquery.cookie.jsで保存期間を時間指定する方法
jquery.cookie.jsで保存期間を1時間等、時間指定したい。公式サイト ...
-
-
JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法
大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...