SnackBar Bootstrap Toast

SnackBar

Basic

<button class="btn btn-primary default">Default</button>

add_notification('.default', {text: 'Example notification text.', duration: 100000});

Direction

// Top Left
add_notification('.top-left', {text: 'Example notification text.', pos: 'top-left'})

// Top Center
add_notification('.top-center', {text: 'Example notification text.', pos: 'top-center'})

// Top Right
add_notification('.top-right', {text: 'Example notification text.', pos: 'top-right'})

// Bottom Left
add_notification('.bottom-left', {text: 'Example notification text.', pos: 'bottom-left'})

// Bottom Center
add_notification('.bottom-center', {text: 'Example notification text.', pos: 'bottom-center'})

// Bottom Right
add_notification('.bottom-right', {text: 'Example notification text.', pos: 'bottom-right'})

Background Color

============= 
Primary 
=============

<button class="btn btn-primary snackbar-bg-primary">Primary</button>

add_notification('.snackbar-bg-primary', { 
text: 'Primary',
actionTextColor: '#fff',
backgroundColor: '#4361ee'
})

============= 
Info 
=============

<button class="btn btn-info snackbar-bg-info">Info</button>

add_notification('.snackbar-bg-info', { 
text: 'Primary',
actionTextColor: '#fff',
backgroundColor: '#4361ee'
})

============= 
Success 
=============

<button class="btn btn-success snackbar-bg-success">Success</button>

add_notification('.snackbar-bg-success', { 
text: 'Success',
actionTextColor: '#fff',
backgroundColor: '#00ab55'
})

============= 
Warning 
=============

<button class="btn btn-warning snackbar-bg-warning">Warning</button>

add_notification('.snackbar-bg-warning', { 
text: 'Warning',
actionTextColor: '#fff',
backgroundColor: '#e2a03f'
})

============= 
Danger 
=============

<button class="btn btn-danger snackbar-bg-danger">Danger</button>

add_notification('.snackbar-bg-danger', { 
text: 'Danger',
actionTextColor: '#fff',
backgroundColor: '#e7515a'
})

================== 
Secondary 
==================

<button class="btn btn-secondary snackbar-bg-secondary">Secondary</button>

add_notification('.snackbar-bg-secondary', { 
text: 'Secondary',
actionTextColor: '#fff',
backgroundColor: '#805dca'
})

============= 
Dark 
=============

<button class="btn btn-dark snackbar-bg-dark">Dark</button>

add_notification('.snackbar-bg-dark', { 
text: 'Dark',
actionTextColor: '#fff',
backgroundColor: '#3b3f5c'
})

No Action

<button class="btn btn-default no-action">No Action</button>

add_notification('.no-action', {showAction: false})

Action Text

<button class="btn btn-button-2 action-text">Action Text</button>

add_notification('.action-text', {actionText: 'Thanks!'})

Text Color

<button class="btn btn-button-3 text-color">Text Color</button>

add_notification('.text-color', {actionTextColor: '#e2a03f'})

Click Callback

<button class="btn btn-button-4 click-callback">Click Callback</button>

add_notification('.click-callback', {
text: 'Custom callback when action button is clicked.',
width: 'auto',
onActionClick: function(element) {
document.querySelector(`.${element.classList[0]}`).addEventListener('click', function() {
Snackbar.show({text: 'Thanks for clicking.',});
})
}
})

Duration

<button class="btn btn-button-5 duration">Duration</button>

add_notification('.duration', { text: 'Duration set to 5s', duration: 5000,})

Bootstrap Toast

Basic

<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-bs-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-bs-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];

var toast = new bootstrap.Toast(toastElement)
toastButton.onclick = function() {
toast.show();
}

Copyright © 2022 DesignReset, All rights reserved.

Coded with