Eugene's Blog
0%

[Electron]vanilla js套件系列-Toast:toastify-js

發表於 更新於 分類於 閱讀次數：
5.1k 9 分鐘

前情提要

一個應用程式，尤其是前端少不了alert訊息啦，網頁系統，基本上就可以使用alert方法可以跳出提示訊息，純網頁應該是不會有違合感，但想像一下以PC App的形式來說，直接跳網頁的那種alert訊息，似乎不太搭，通常一個系統一定會搭配一套toastr的套件，將成功、失敗訊息顯示於左上、右上、左下、右下角，清楚地告訴使用者，他的操作是否成功或失敗。

筆者認為toastr的基本要素就是至少要有成功或失敗的樣式可以選擇，以及剛提到的訊息置於左上、右上、左下、右下角等選項，再則進階一點就是訊息內容本身要支援，html格式訊息或一般文字訊息，才可以靈活運用。這篇的前提條件跟前幾篇一樣，筆者想要找到一個Vanilla js的Toastr套件，這篇主要是要介紹筆者挑到在使用的https://apvarun.github.io/toastify-js/。

內容

建立Demo專案

筆者這邊使用簡單的html檔案，透過連結載入的方式使用toastify.js，為了美觀，筆者這邊套用Bootstrap5，首先

1
2
3
4
5
cd {targetPath}
mkdir demo-toastifyjs
cd demo-toastifyjs
touch index.html
code .

頁面中載入Bootstrap5及toastify.js

接著使用VSCode編輯剛建立之index.html檔案，載入bootstrap 5及toastify.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <title>ToastrifyJs Demo</title>
</head>

<body class="container-fluid">    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>   
</body>

</html>

撰寫主要程式內容

觸發按鈕

為模擬toastr視窗，筆者就在頁面上簡單放幾個按鈕備用，筆者這編參考bootstrap中的listgroup章節並將內容物置換成button結構，並將它們的id標上不一樣的名稱

https://getbootstrap.com/docs/5.0/components/list-group/

1
2
3
4
5
6
7
8
9
<div class="row justify-content-md-center m-5">
    <div class="col-3">
        <div class="list-group">
            <button type="button" id="success-btn" class="list-group-item list-group-item-action">Success</button>
            <button type="button" id="error-btn" class="list-group-item list-group-item-action">Error</button>
            <button type="button" id="info-btn" class="list-group-item list-group-item-action">Info</button>
        </div>
    </div>
</div>

Button Click事件:ShowToast

接著我們使用vanilla js的方式找到button element物件，並且針對click事件中呼叫toastify.js的showToast方法來跳出toastr視窗

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
    let $successBtn = document.querySelector('#success-btn');
    let $errorBtn = document.querySelector('#error-btn');
    let $infoBtn = document.querySelector('#info-btn');
    $successBtn.addEventListener('click', () => {
        Toastify({
            text: "This is a toast",
            style: {
                background: "blue",
            }
        }).showToast();
    });
    $errorBtn.addEventListener('click', () => {
        Toastify({
            text: "This is a toast",
            style: {
                background: "red",
            }
        }).showToast();
    });
    $infoBtn.addEventListener('click', () => {
        Toastify({
            text: "This is a toast",
            style: {
                background: "green",
            }
        }).showToast();
    });

</script>

呈現效果

筆者直接使用background屬性，不同三個按鈕，分別對應三個不同顏色

詳細API設定

參考其教學網站中的API設定，看完覺得滿簡單的，筆者這邊就不再贅述了，不過列一下筆者這次使用到的一些API

  • text:toastr顯示字串
  • style: toastr的樣式，筆者這邊使用到background屬性，依照不同按鈕改變成不同顏色
  • gravity:筆者沒有特別設定，預設為「top」上方
  • position:筆者沒有特別設定，預設為「right」右邊

因此以上設定來說，toastr會出現在右上方，並且套用筆者這邊設定好的背景顏色，詳細設定如下

Option Key type Usage Defaults
text string Message to be displayed in the toast “Hi there!”
node ELEMENT_NODE Provide a node to be mounted inside the toast. node takes higher precedence over text
duration number Duration for which the toast should be displayed. -1 for permanent toast 3000
selector string | ELEMENT_NODE ShadowRoot CSS Selector or Element Node on which the toast should be added
destination URL string URL to which the browser should be navigated on click of the toast
newWindow boolean Decides whether the destination should be opened in a new window or not false
close boolean To show the close icon or not false
gravity “top” or “bottom” To show the toast from top or bottom “top”
position “left” or “right” To show the toast on left or right “right”
backgroundColor CSS background value To be deprecated, use style.background option instead. Sets the background color of the toast
avatar URL string Image/icon to be shown before text
className string Ability to provide custom class name for further customization
stopOnFocus boolean To stop timer when hovered over the toast (Only if duration is set) true
callback Function Invoked when the toast is dismissed
onClick Function Invoked when the toast is clicked
offset Object Ability to add some offset to axis
escapeMarkup boolean Toggle the default behavior of escaping HTML markup true
style object Use the HTML DOM Style properties to add any style directly to toast
oldestFirst boolean Set the order in which toasts are stacked in page true

結論

藉由簡單的示範，沒有任何副作用的透過vanilla js撰寫方式實作出Toastr視窗彈跳，對筆者來說太感人了，基本上只要透過style中的background去搭配整體網站使用的色彩，就可以分別做出成功及錯誤的Toastr視窗。

參考

相關文章