バニラ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>
オプション項目
各種オプション設定についてはこちらのページを参照すること。
関連記事
-
-
Video.jsでYoutube動画を取り扱う方法
Video.jsでYoutube動画を取り扱いたい。具体的にはVideo.jsの ...
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...
-
-
架空の地図画像をLeafletを用いてWeb上でマップ表示する方法
ゲーム攻略サイト等でゲーム内の地図をWeb上で表示し、マーカーを立てたりマウスホ ...
-
-
国土地理院のAPIを使用して無料でジオコーディング(住所→経度緯度)を行う方法
GoogleMapAPIでジオコーディングをするには、支払い情報を登録したアカウ ...
-
-
jQueryにてボタンをクリックするとAjax通信し結果をテキストボックスに反映する方法
jQueryを利用しページ内の特定のボタンをクリックすると、指定のページにAja ...