Smarty Material Design

power of google material

MATERIAL COMPONENTS

MATERIAL : DIALOGS

The Material Design Lite (MDL) dialog component allows for verification of user actions, simple data input, and alerts to provide extra information to users.

Note: Dialogs use the HTML <dialog> element, which currently has very limited cross-browser support. To ensure support across all modern browsers, please consider using a polyfill or creating your own. There is no polyfill included with MDL.

Smarty note: Desktop browsers may support this feature but mobile browsers do not! We recommend you bootstrap modals. In the future, all browsers may support <dialog> but for now, please, avoid using it.

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

Show Code

<!-- Basic Chip -->
<span class="mdl-chip">
    <span class="mdl-chip__text">Basic Chip</span>
</span>

<!-- Deletable Chip -->
<span class="mdl-chip mdl-chip--deletable">
    <span class="mdl-chip__text">Deletable Chip</span>
    <button type="button" class="mdl-chip__action"><i class="material-icons">cancel</i></button>
</span>

<!-- Button Chip -->
<button type="button" class="mdl-chip">
    <span class="mdl-chip__text">Button Chip</span>
</button>

BLOCKS

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

ELEMENTS

MDL class	Effect	Remarks
`mdl-dialog__title`	Defines the title container in the dialog.	Optional on title container.
`mdl-dialog__content`	Defines the content container of the dialog.	Required on content container.
`mdl-dialog__actions`	Defines the actions container in the dialog.	Required on action container.

MODIFIERS

MDL class	Effect	Remarks
`mdl-dialog__actions--full-width`	Modifies the actions to each take the full width of the container. This makes each take their own line.	Optional on action container.

WHY SMARTY?

RECENTLY VISITED