Bootstrap Toast
Basic
Bootstrap
just now
Hello, world! This is a toast message.
<button id="toast-btn" class="btn btn-primary">Open Toast</button> <!-- Toast Element --> <div style="position: absolute; top: 0; right: 22px;left: 22px;z-index: 9999;"> <div class="toast toast-primary fade hide" role="alert" data-delay="6000" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="mr-auto">Bootstrap</strong> <small class="meta-time">just now</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div>
// Get the Toast button var toastButton = document.getElementById("toast-btn"); // Get the Toast element var toastElement = document.getElementsByClassName("toast")[0]; toastButton.onclick = function() { $('.toast').toast('show'); }
SnackBar
Basic
<button class="btn btn-primary default">Default</button> $('.default').click(function() { Snackbar.show({text: 'Example notification text.', duration: 100000}); });
Top Left
<button class="btn btn-success top-left">Top Left</button> $('.top-left').click(function() { Snackbar.show({ text: 'Example notification text.', pos: 'top-left' }); });
Top Center
<button class="btn btn-info top-center">Top Center</button> $('.top-center').click(function() { Snackbar.show({ text: 'Example notification text.', pos: 'top-center' }); });
Top Right
<button class="btn btn-danger top-right">Top Right</button> $('.top-right').click(function() { Snackbar.show({ text: 'Example notification text.', pos: 'top-right' }); });
Bottom Left
<button class="btn btn-warning bottom-left">Bottom Left</button> $('.bottom-left').click(function() { Snackbar.show({ text: 'Example notification text.', pos: 'bottom-left' }); });
Bottom Center
<button class="btn btn-secondary bottom-center">Bottom Center</button> $('.bottom-center').click(function() { Snackbar.show({ text: 'Example notification text.', pos: 'bottom-center' }); });
Bottom right
<button class="btn btn-dark bottom-right">Bottom right</button> $('.bottom-right').click(function() { Snackbar.show({ text: 'Example notification text.', pos: 'bottom-right' }); });
No Action
<button class="btn btn-default no-action">No Action</button> $('.no-action').click(function() { Snackbar.show({ showAction: false }); });
Action Text
<button class="btn btn-button-2 action-text">Action Text</button> $('.action-text').click(function() { Snackbar.show({ actionText: 'Thanks!' }); });
Text Color
<button class="btn btn-button-3 text-color">Text Color</button> $('.text-color').click(function() { Snackbar.show({ actionTextColor: '#e2a03f', }); });
Click Callback
<button class="btn btn-button-4 click-callback">Click Callback</button> $('.click-callback').click(function() { Snackbar.show({ text: 'Custom callback when action button is clicked.', width: 'auto', onActionClick: function(element) { //Set opacity of element to 0 to close Snackbar $(element).css('opacity', 0); Snackbar.show({ text: 'Thanks for clicking the Dismiss button!', showActionButton: false }); } }); });
Duration
<button class="btn btn-button-5 duration">Duration</button> $('.duration').click(function() { Snackbar.show({ text: 'Duration set to 5s', duration: 5000, }); });
Background Color
============= Primary ============= <button class="btn btn-primary snackbar-bg-primary">Primary</button> $('.snackbar-bg-primary').click(function() { Snackbar.show({ text: 'Primary', actionTextColor: '#fff', backgroundColor: '#4361ee' }); }); ============= Info ============= <button class="btn btn-info snackbar-bg-info">Info</button> $('.snackbar-bg-info').click(function() { Snackbar.show({ text: 'Info', actionTextColor: '#fff', backgroundColor: '#2196f3' }); }); ============= Success ============= <button class="btn btn-success snackbar-bg-success">Success</button> $('.snackbar-bg-success').click(function() { Snackbar.show({ text: 'Success', actionTextColor: '#fff', backgroundColor: '#1abc9c' }); }); ============= Warning ============= <button class="btn btn-warning snackbar-bg-warning">Warning</button> $('.snackbar-bg-warning').click(function() { Snackbar.show({ text: 'Warning', actionTextColor: '#fff', backgroundColor: '#e2a03f' }); }); ============= Danger ============= <button class="btn btn-danger snackbar-bg-danger">Danger</button> $('.snackbar-bg-danger').click(function() { Snackbar.show({ text: 'Danger', actionTextColor: '#fff', backgroundColor: '#e7515a' }); }); ============= Dark ============= <button class="btn btn-dark snackbar-bg-dark">Dark</button> $('.snackbar-bg-dark').click(function() { Snackbar.show({ text: 'Dark', actionTextColor: '#fff', backgroundColor: '#3b3f5c' }); });
© 2021 DesignReset
Coded with
Alan Green
Lead Developer
Todo
Launch New Seo Wordpress Theme has been moved to Completed Board by Alma Clark
New Task is added by Ernest Reeves
Dinner with Kelly Young has been moved to Completed Board by Dale Butler
Event Notifications
New Event has been added on 15 Dec 2020
Collect documents from Kelly at the restaurant tommorrow.
Meeting Event on 12 Nov has been updated to 8 PM
New Event Seminar organised by Design Reset will be held on 25 January
Today's Conference is Cancelled.
Meeting with Project Lead on 01 Jan has been updated to 15 Jan