diff options
Diffstat (limited to 'notif/example.html')
| -rw-r--r-- | notif/example.html | 38 |
1 files changed, 17 insertions, 21 deletions
diff --git a/notif/example.html b/notif/example.html index 681a951..e6b12c5 100644 --- a/notif/example.html +++ b/notif/example.html @@ -4,41 +4,37 @@ <meta charset="UTF-8" /> <title>WUI - notif</title> <style> - .test-1 { - width: 80%; + #input_msg { + width: calc(100% - 1em); height: 4em; - border: 2px solid salmon; - background-color: lightsalmon; - margin-bottom: 1em; - } - .test-2 { - width: 80%; - height: 4em; - border: 2px solid silver; - background-color: honeydew; - margin-bottom: 1em; } </style> </head> <body onload="main()"> - <input id="notif.msg"></input> + <textarea id="input_msg"></textarea> <button onclick="notifInfo()">Info</button> - <button onclick="notifError()">Error</button> - - <br/> - <br/> - <div class="test-1"></div> - <div class="test-2"></div> + <button onclick="notifError()">Error</button + <p></p> <script> var exports = {} - let inputMsg = document.getElementById("notif.msg") + let inputMsg = document.getElementById("input_msg") let wuiNotif = null </script> <script src="notif.js"></script> <script> function main() { wuiNotif = new WuiNotif() - inputMsg.value = `test <b>bold</b>` + inputMsg.value = `Hello world, this is a notification with HTML format using <b>bold</b> and <u>underline</u> words.` + + let previewError = document.createElement("div") + previewError.classList.add(`${WUI_NOTIF_CLASS_ERROR}`) + previewError.innerText = `Preview of error style`; + document.body.appendChild(previewError) + + let previewInfo = document.createElement("div") + previewInfo.classList.add(`${WUI_NOTIF_CLASS_INFO}`) + previewInfo.innerText = `Preview of info style`; + document.body.appendChild(previewInfo) } function notifInfo() { wuiNotif.Info(inputMsg.value) |