snackbar with material design
Explore the simplicity of Snackbar with Material Design, providing transient popup notifications for a clean and effective user interface. Implement sleek and modern notifications seamlessly, enhancing user experience with this intuitive and visually appealing design. Elevate your application's communication with the SNACKBAR material design feature.
Views: 735
2018
-
RESULT
Preview -
HTML
Html -
JAVASCRIPT
Javascript
rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"
class="container"
id="demo-show-snackbar" class="mdl-button mdl-js-button mdl-button--raised" type="button"Click
id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar"
class="mdl-snackbar__text"
class="mdl-snackbar__action" type="button"
defer src="https://code.getmdl.io/1.3.0/material.min.js"
$(function() {
(function() {
'use strict';
var snackbarContainer = document.querySelector('#demo-snackbar-example');
var showSnackbarButton = document.querySelector('#demo-show-snackbar');
var handler = function(event) {
showSnackbarButton.style.backgroundColor = '';
};
showSnackbarButton.addEventListener('click', function() {
'use strict';
showSnackbarButton.style.backgroundColor = '#' +
Math.floor(Math.random() * 0xFFFFFF).toString(16);
var data = {
message: 'Button color changed.',
timeout: 3000,
actionHandler: handler,
actionText: 'Undo'
};
snackbarContainer.MaterialSnackbar.showSnackbar(data);
});
}());
})
