バニラ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のIntersectionObserverを利用して指定した要素が表示されているか確認する方法
ブラウザ上で指定した要素が表示されているかチェックし、表示されている場合は何らか ...
-
マウスオーバーでの画像切り替えをJavaScriptで簡単に対応
マウスが要素にのった際に画像を切り替える処理を入れたかった。多分CSSの管轄なん ...
-
AjaxのJSONP使用でPHPで作った配列をJSに返す方法
AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...
-
NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え
チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...
-
Ajaxを使用する際の注意
Ajaxで特にJSONPを使う際によくミスることがあるので 注意点をまとめておく ...