diff --git a/README.md b/README.md index 5c148ce..9aea745 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,7 @@ You can pass to the `$.toast` function an object with the settings for your toas | type | Determines the style of the toast based on Bootstrap styles | 'info' | 'info', 'success', 'warning', 'error' | | delay | Determines how long the Toast shoud be shown for. The default, -1, will show the toast until the user clicks close. | -1 | omit or set to -1 to disable auto close, or timeout value in milliseconds | img | Shows an image before the title | N/A | { src: '', class: '', title: '', alt: '' } +| icon | Shows an icon before title | N/A | A complete icon class of your own. Example "fas fa-user-secret", show secret user | pause_on_hover| true/false respectively to pause on hover | false | true/false | | container | Set the container inside which the toasts will be displayed | $("body") | A JQuery selector | diff --git a/css/toast.css b/css/toast.css index fbab545..e98072c 100644 --- a/css/toast.css +++ b/css/toast.css @@ -26,3 +26,8 @@ .toast-container>.toast-wrapper>.toast>.toast-header strong { padding-right: 20px; } + +.toast-container > .toast-wrapper > .toast > .toast-header i { + padding-top:2px; + margin-right:7px; +} diff --git a/dist/toast.min.css b/dist/toast.min.css index 6fa9ca2..9fd1318 100644 --- a/dist/toast.min.css +++ b/dist/toast.min.css @@ -3,4 +3,4 @@ * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component * @version 0.7.1 **/ -.toast-container{position:sticky;z-index:1055;top:0}.toast-wrapper{position:absolute;z-index:1055;top:0;right:0;margin:5px}.toast-container > .toast-wrapper > .toast{min-width:150px;background-color:rgb(255, 255, 255);border-top:none}.toast-container > .toast-wrapper > .toast > .toast-header strong{padding-right:20px} +.toast-container{position:sticky;z-index:1055;top:0}.toast-wrapper{position:absolute;z-index:1055;top:0;right:0;margin:5px}.toast-container > .toast-wrapper > .toast{min-width:150px;background-color:rgb(255, 255, 255);border-top:none}.toast-container > .toast-wrapper > .toast > .toast-header strong{padding-right:20px}.toast-container > .toast-wrapper > .toast > .toast-header i{padding-top:2px;margin-right:7px;} diff --git a/example/index.html b/example/index.html index 8dd891f..6ee60c9 100644 --- a/example/index.html +++ b/example/index.html @@ -19,6 +19,8 @@

+ +

@@ -86,6 +88,21 @@ }); } + function show_icon_toast() { + let type = TYPES[Math.floor(Math.random() * TYPES.length)], + title = TITLES[type], + content = CONTENT[type]; + + $.toast({ + title: title, + subtitle: '11 mins ago', + content: content, + type: type, + delay: 5000, + icon: 'fas fa-user-secret' + }); + } + function show_random_snack() { let type = TYPES[Math.floor(Math.random() * TYPES.length)], content = CONTENT[type].replace('toast', 'snack'); diff --git a/js/toast.js b/js/toast.js index 74575fd..27d4720 100644 --- a/js/toast.js +++ b/js/toast.js @@ -36,6 +36,7 @@ type = opts.type || 'info', delay = opts.delay || -1, img = opts.img, + icon = opts.icon, pause_on_hover = opts.pause_on_hover || false, pause = false, delay_or_autohide = ''; @@ -92,6 +93,10 @@ html += '' + (img.alt || 'Image') + ''; } + if (typeof icon !== 'undefined') { + html += ''; + } + html += '' + title + ''; html += '' + subtitle + ''; html += '