Material Design Lite – Tooltips (MDL) : Tooltips are used to provide useful information when user hovers on some text, link, button icon etc. Tooltip is an important component of any framework. Material design lite tooltip is basically enhanced version of the basic html title attribute. Here in this tutorial we are going to explain how you can create tooltip in material design lite(MDL). You can also use our online demo run and see the output.

How to create Material Design Lite – Tooltips | MDL | Tooltip Example

Let us learn to create material design lite tootips using the examples and demo.

Syntax

My Text
This is simple text... 

Add an element for which you want to create tooltip and then add an id selector. Now add a span and add “for” attribute. This “for” attribute will have the same value as the element’s id selector. Add class mdl-tootltip and now add some text for the tooltip which will be displayed when user will hover the element.

Example

Let us create a simple example of the tooltip in material design lite(MDL).

Setting
All in One Settings for your App. 

If you run the above example it will produce output something like this –

Add Tooltip on Icon

You can add tooltip on icon hover simply as below –

share
Share Content Online. 

If you run the above example it will produce output something like this –

Large Tooltip

The class mdl-tooltip–large is used to create large tooltips.

Hover Me
This is large font demo. 

Add Image | Icon to Tooltip

Images can also be added in material design lite(MDL). Here we have created an example to add the image to the tooltip.

Tooltip With Image


This is image demo. 

If you run the above example it will produce output something like this –

Tooltip Position : Top

If you want to specify the position of tooltip you can use predefined classes(mdl-tooltip–top for top) to add the position.

Top

This is position top Demo. 

Tooltip Position : Bottom

The Class mdl-tooltip–bottom is used to add the bottom position.

Bottom

This is position Bottom Demo. 

Tooltip Position : Left

The Class mdl-tooltip–left is used to add the bottom position.

Left

This is position left Demo. 

Tooltip Position : Right

The Class mdl-tooltip–right is used to add the bottom position.

Right

This is position right Demo. 

Material Design Lite – Switch Button : Switch is an enhanced version of basic html element ie. checkbox. Switch button is basically used to provide the turn on/ off functionality. Binary state true/false is set when user turns on/off the button. Material Design Lite(MDL) provides switch button component to create the beautiful switch buttons. Here in this tutorial we are going to explain how you can create Material Design Lite switch buttons. You can use online editor to edit and run the code online.

Material Design Lite – Switch Button | On | Off Example

Let us create simple switch buttons in material design Lite(MDL).

Syntax

Here is syntax to create basic switch button –

  
  Button Name

First create a label with class mdl-switch, mdl-js-switch and an attribute “for” (switch-btn). Now create default checkbox with id(switch-btn) and class mdl-switch__input now create a span with class mdl-switch__label to add the switch button label.

Example

Now let us create a simple switch button –

  
  Volume off/on

If you run the above example it will produce output something like this –

Options

Following Options are available for the switch buttons –

• mdl-switch: This is used to define label as an MDL component.
• mdl-js-switch: This is used to Assign the basic MDL behavior to label.
• mdl-switch__input: This is used to Apply basic MDL behavior to switch.
• mdl-switch__label: This is used to Apply basic MDL behavior to caption.
• mdl-js-ripple-effect: This is used to add ripple effect.

Material Design Lite Switch Button ON | OFF Example With Ripple Effect

To Add ripple effect just add the class mdl-js-ripple-effect as below –

  
  Volume off/on Ripple Effect

Material Design Lite – Icon Toggle : Material Design Lite(MDL) provides toggle icon component for the icons. Material design lite embeds the toggle icon functionality with the basic html element checkbox. Here in this tutorial we are going to explain how you can create Material Design Lite Icon Toggle. You can use online editor to edit and run the code online.

Material Design Lite – Icon Toggle | MDL | Example

Let us create simple icon toggle in material design Lite(MDL).

Syntax

Syntax for icon toggle is as below –

  
  format_bold

First create a label with class mdl-icon-toggle and mdl-js-icon-toggle and for (icon-toggle-id) attribute with input element checkbox’s id. Now create default checkbox with id(icon-toggle-id) and class mdl-icon-toggle__input now create icon with class mdl-icon-toggle__label material-icons.

Example

  
  format_bold


 

If you run the above example it will produce output something like this –

Options

Following Options are available for the icon toggle –

• mdl-icon-toggle: This is used to define label as an MDL component.
• mdl-js-icon-toggle: This is used to Assign the basic MDL behavior to label.
• mdl-icon-toggle__input: This is used to Apply basic MDL behavior to icon-toggle.
• mdl-icon-toggle__label: This is used to Apply basic MDL behavior to caption.
• mdl-js-ripple-effect: This is used to add ripple effect.

Material Design Lite – Radio Button : Material Design Lite(MDL) radio button component is basically upgraded version of basic html radio button. Radio Button is basically an circle representation which is set true or false when user clicks or touches it. Radio button is used in groups ie it enables user to select one option from the two or more radio buttons. Radio button is an important form element and it is used in most cases. Material Design Lite(MDL) provides an enhanced version of the basic radio button by adding the cool visual effects. Here in this tutorial we are going to explain how you can create material design lite radio button with cool effects. You can use our online editor to edit and run the code online.

Material Design Lite – Radio Button | MDL | Example | Demo

Let us go step by step to create material design lite radio button with example and demo.

Syntax

Here is syntax to create basic Radio Button in material design lite-

  
  Radio Button

To create radio button in Material design lite you first need to create a label tag with (for) attribute specifying the id and class mdl-radio mdl-js-radio and then you need to add basic html radio button with id and class mdl-radio__button. To create label for radio button add a span with class mdl-radio__label and add text inside it.

Example

Now let us create an example to understand the material design lite radio button.

  
  Radio Button


  

If you run the above example it will produce output something like this –

Options

Following Options Are Available –

• mdl-radio: This is used to define label as an MDL component.
• mdl-js-radio: This is used to Assign the basic MDL behavior to label.
• mdl-radio__button: This is used to Apply basic MDL behavior to radio.
• mdl-radio__label: This is used to Apply basic MDL behavior to caption.
• mdl-js-ripple-effect: This is used to add ripple effect.

Material Design Lite RadioBox: Checked | Selected | Example

  
  Male



  
  Female


 

If you run the above example it will produce output something like this –

Material Design Lite Radio Button : Ripple Effect

If you want to add the ripple effect you can add as below –

  
  Enable Fullscreen

Material Design Lite – Checkbox : Material Design Lite(MDL) checkbox component is basically upgraded version of basic html checkbox. Checbox is basically an square(element) representation which is set true or false when user clicks or touches depending on the previous state. If it already checked and user touches it then it will set false else if it is not checked and user touches it then it will set true. Checkbox is an important form element and it is used in most cases. Material Design Lite(MDL) provides an enhanced version of the basic checkbox by adding the cool visual effects. Here in this tutorial we are going to explain how you can create material design lite checkbox. You can use our online editor to edit and run the code online.

Material Design Lite – Checkbox | MDL | Example | Demo

Let us go step by step to create Material design lite(MDL) checkboxes with example and demo.

Syntax

Here is syntax to create basic checkbox in material design lite-

  
  Checkbox Label

To create checkbox in Material design lite you first need to create a label tag with for attribute specifying the id and class mdl-checkbox mdl-js-checkbox and then you need to add basic html checkbox with id and class mdl-checkbox__input. To create label for checkbox add a span with class mdl-checkbox__label and add text inside it.

Example

Now let us create an example to understand the material design lite checkbox.

  
  Enable Fullscreen

If you run the above example it will produce output something like this –

Options

• mdl-checkbox(Required) This is used to define label as an MDL component.
• mdl-js-checkbox(Required) This is used to assign basic MDL behavior to label Required on label element.
• mdl-checkbox__input(Required) This is used to assign basic MDL behavior to checkbox.
• mdl-checkbox__label(Required) This is used to assign basic MDL behavior to caption.
• mdl-js-ripple-effect(Optional) This is used to apply ripple click effect.

Material Design Lite Checkbox : Checked | ON | Example

  
  Enable Fullscreen

If you run the above example it will produce output something like this –

Material Design Lite Checkbox : UnChecked | OFF | Example

To uncheck checkbox just remove the checked attribute from input type=”checkbox” element as –

  
  Enable Fullscreen

If you run the above example it will produce output something like this –

Material Design Lite Checkbox : Ripple Effect

You can add ripple effect simply as below –

  
  Enable Fullscreen

Material Design Lite Checkbox : Disabled State

For disabled state just use the default disabled attribute as below –

  
  Enable Fullscreen(Disabled)

If you run the above example it will produce output something like this –

Material Design Lite – Sliders : Material Design Lite(MDL) Slider Component is the basically upgraded version of the HTML5 input range element. Slider contains a horizontal line and a movable disc placed over it which can be moved to set the value. Here in this tutorial we are going to explain how you can create sliders in Material Design Lite(MDL). You can use our online editor to edit and run the code online.

Material Design Lite – Sliders | MDL | Example

Let us go step by step to create sliders.

Default Slider

Classs mdl-slider and mdl-js-slider is used to create the default slider. Here is an example of default slider –

If you run the above example it will produce output something like this –

Slider With Starting Value

If you want to assign some value to the slider you can use value attribute to assign the value. Here is an example of default slider –

If you run the above example it will produce output something like this –

Options

Following options are available in Material Design Lite Sliders Component –

• mdl-slider(Required) This is used to define the input element as an MDL component.
• mdl-js-slider(Required) This is used to assign the basic MDL behavior to input element.

Material Design Lite – Menus : The Material Design Lite(MDL) Menu component is user interface that provides various options and select one of them. The material design menu options have animation effects when you click on it. It also provides functionality to enable and disable the options. Here in this tutorial we are going to explain how you can create different – different menus in material design lite. You can also use our demo to run and see the output.

Material Design Lite – Menus

Let us go step by step to learn how to create various types of menus in material design lite.

Lower Left Menu

You can create lower left menu in material design as below –

 

  more_vert



   
Action 1
  
Action 2 Disabled
  
Action 3

If you run the above example it will produce output something like this –

Lower Right Menu

You can create lower right menu in material design as below –

 

  more_vert



  
Action 1
  
Action 2 Disabled
  
Action 3

If you run the above example it will produce output something like this –

Top Left Menu

You can create Top Left menu in material design as below –

 


  more_vert



    
Action 1
  
Action 2 Disabled
  
Action 3

If you run the above example it will produce output something like this –

Top Right Menu

You can create top right menu in material design as below –

 


  more_vert



  
Action 1
  
Action 2 Disabled
  
Action 3

If you run the above example it will produce output something like this –

Material Design Lite – Loading : MDL Loading Component is used to indicate the loading and progress state. Material design lite progress component is and indicator which is used to indicate some background activity. Here in this tutorial we are going to explain how you can create progress bar in material design lite.

Material Design Lite – Loading | Progress Bar | Spinner | Example

Let us go step by step to create material design lite progress bar loading. There are two types of loading components available in material design lite.

• Progress Bar
• Spinner

Progress Bar

Let us first understand the material design lite progress bar.

Default Progress Bar-

mdl-js-progress class is used to create default progress bar. Here is an example of default progress bar-

If you run the above example it will produce output something like this –

Indeterminate Progress Bar-

mdl-progress__indeterminate class is used to create Indeterminate progress bar. Here is an example of Indeterminate progress bar-

If you run the above example it will produce output something like this –

Buffering-

You can create progress for buffering as below –

If you run the above example it will produce output something like this –

Options

• mdl-js-progressbBmdl-js-progress(Required) This is used to Assign basic MDL behavior to progress indicator.
• mdl-progress–indeterminate(Optional) Applies animation effect

Spinner

The material design lite spinner component is basically an enhanced replacement of the classic “wait cursor”. It is used to indicate some ongoing progress.
The spinner consists of an open circle it changes colors as animates in a clockwise direction and it indicates that process has been started and waiting to
complete.

Default Spinner-

Default spinner changes color as it rotates and animates. You can create default spinner simply as below –

If you run the above example it will produce output something like this –

Single Color Spinner-

If you do not want to change the spinner color as it rotates you can use single color spinner. You can create single color spinner simply as below –

If you run the above example it will produce output something like this –

Options

• mdl-spinner(Required) This is used to define the container as an MDL spinner component.
• mdl-js-spinneris-active(Required) This is used to assign the basic MDL behavior to spinner and makes the spinner visible and animated.
• mdl-spinner–single-color(Optional) Applies single color instead of changing color in animation.

Material Design Lite – Dialogs : The Material Design Lite (MDL) dialog component allows us to perform the action such as user action verification, input data and alerts box to provide extra information to users. Here in this tutorial we are going to explain how you can Material design lite dialogs. You can use our online editor to edit and run the code online.

Material Design Lite – Dialogs | Popup | Modal | Alert Box | Example

Sytax for Dialogs is as below-

Syntax –

    
Dialog Title
    

      

        Content goes here....
      
    
    

      Action Button
      Close Button
    
  

The above syntax is used to create basic modal, alert box in Material design lite.

Now let us create a simple example to understand the basic dialog in Material Design Lite.

Example

  Show Dialog
  

    
Delete this
    

      

        Do you really want to delete this??
      
    
    

      Yes
      No
    
  
  

                                                                                                        

If you run the above example it will produce the output something like this –

Mdl Dialog Classes

• mdl-dialog : This is used to define the container of the dialog component.
• mdl-dialog__title : This is used to define the title container in the dialog.
• mdl-dialog__content : This is used to define the content container of the dialog.

• mdl-dialog__actions : This is used to define the actions container in the dialog.

• mdl-dialog__actions–full-width : This Modifies the actions to make the full width of the container and it makes each to take their own line.

Material Design Lite Alert Box

  Show Alert
  

    
Alert
    

      

        Please Enter Correct Name.
      
    
    

      Ok
    
  
  
                                                                                                        

Material Design Lite Confirm Box

  Show Confirmation Box
  

    
Confirm
    

      

        If You delete your messages it can't be undone. Please Confirm to Proceed?
      
    
    

	  Confirm
      Cancel