Smarty - Multipurpose + Admin

MATERIAL COMPONENTS

MATERIAL : SNACKBAR

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.

HOW TO ENABLE MATERIAL

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

Snackbar

Show Code

<!-- 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>

Toast

Show Code

<!-- 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>

BLOCKS

MDL class	Effect	Remarks
`mdl-snackbar`	Defines the container of the snackbar component.	Required on snackbar container

ELEMENTS

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

MODIFIERS

MDL class	Effect	Remarks
`mdl-snackbar--active`	Marks the snackbar as active which causes it to display.	Required when active. Controlled in JavaScript

DATA OBJECT

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.

WHY SMARTY?

RECENTLY VISITED