Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.
The Material Design Lite (MDL) snackbar component is a container used to notify a user of an operation's status. It displays at the bottom of the screen. A snackbar may contain an action button to execute a command for the user. Actions should undo the committed action or retry it if it failed for example. Actions should not be to close the snackbar. By not providing an action, the snackbar becomes a toast component.
1. Add to html head, BEFORE essentials.css: <link href="assets/plugins/mdl/material.indigo-blue.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 2. Add .enable-materialdesign class to body: <body class="smoothscroll enable-animation enable-materialdesign"> NOTE: if you don't need 'Material Design Lite' javascript plugin, skip step 2 (.enable-materialdesign class is used by assets/js/scripts.js to load MDL plugin from assets/plugins/mdl/) COLOR SCHEME: We use blue as default color scheme. You can create your own material design color: Click to create your material design color Credits: MDL official
<!-- Button Trigger --> <button id="demo-show-snackbar" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Snackbar</button> <!-- Snackbar code --> <div id="demo-snackbar-example" class="mdl-js-snackbar mdl-snackbar"> <div class="mdl-snackbar__text"></div> <button class="mdl-snackbar__action" type="button"></button> </div> <!-- Javscript Code --> <script> '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: 2000, actionHandler: handler, actionText: 'Undo' }; snackbarContainer.MaterialSnackbar.showSnackbar(data); </script>
<!-- Button trigger --> <button id="demo-show-toast" class="mdl-button mdl-js-button mdl-button--raised" type="button">Show Toast</button> <!-- Toast code --> <div id="demo-toast-example" class="mdl-js-snackbar mdl-snackbar"> <div class="mdl-snackbar__text"></div> <button class="mdl-snackbar__action" type="button"></button> </div> <!-- Javascript code --> <script> (function() { 'use strict'; window['counter'] = 0; var snackbarContainer = document.querySelector('#demo-toast-example'); var showToastButton = document.querySelector('#demo-show-toast'); showToastButton.addEventListener('click', function() { 'use strict'; var data = {message: 'Example Message # ' + ++counter}; snackbarContainer.MaterialSnackbar.showSnackbar(data); }); }()); </script>
MDL class | Effect | Remarks |
---|---|---|
mdl-snackbar |
Defines the container of the snackbar component. | Required on snackbar container |
MDL class | Effect | Remarks |
---|---|---|
mdl-snackbar__text |
Defines the element containing the text of the snackbar. | Required |
mdl-snackbar__action |
Defines the element that triggers the action of a snackbar. | Required |
MDL class | Effect | Remarks |
---|---|---|
mdl-snackbar--active |
Marks the snackbar as active which causes it to display. | Required when active. Controlled in JavaScript |
The Snackbar components showSnackbar
method takes an object for snackbar data. The table below shows the properties and their usage.
MDL class | Effect | Remarks | |
---|---|---|---|
message | The text message to display. | Required | String |
timeout | The amount of time in milliseconds to show the snackbar. | Optional (default 2750) | Integer |
actionHandler | The function to execute when the action is clicked. | Optional | Function |
actionText | The text to display for the action button. | Required if actionHandler is set | String. |