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'
});
});
Copyright © 2021 DesignReset, All rights reserved.
Coded with