Tag Archives: Material Design Lite Tutorial

August 21, 2016   Material Design

Material Design Lite – Tooltips

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

Material Design Lite – Tooltips

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).

Material Design Lite – Tooltips

Setting
All in One Settings for your App.

Try it »

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

Material Design Lite – Tooltips

More Examples

Let us have some more examples and demo.

Add Tooltip on Icon

You can add tooltip on icon hover simply as below –

Material Design Lite(MDL): Tooltip on Icon

share

Share Content Online.

Try it »

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

Material Design Lite – Tooltips

Large Tooltip

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

Material Design Lite(MDL): Large Tooltip


This is large font demo.

Try it »

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.

Material Design Lite(MDL): Add image to tooltip

Tooltip With Image


This is image demo.

Try it »

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

Add image in tooltip example

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.

Material Design Lite(MDL): Position Top

Top

This is position top Demo.

Try it »

Tooltip Position : Bottom

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

Material Design Lite(MDL): Position Bootm

Bottom

This is position Bottom Demo.

Try it »

Tooltip Position : Left

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

Material Design Lite(MDL): Position Left

Left

This is position left Demo.

Try it »

Tooltip Position : Right

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

Material Design Lite(MDL): Position RIght

Right

This is position right Demo.

Try it »

Read More
August 16, 2016   Material Design Lite - Faq

Material design lite Registration page

Material design lite Registration page : You can create registration form simply using the predefined classes in material design lite. Here in this tutorial we are going to explain how you can create a registration form page using material design lite classes. You can also use our online editor to edit and run the example online.

Material design lite Registration page: Registration Form Example

You can create simple login form in material design lite as below. This form contains two input fields – email, password and one submit button.

Material design lite login page Example:










	

		

			

				
Regiser

Try it »

If you run the above example it will produce the output for registration page ie. registration form something like this –

Material design lite Registration page

Read More
August 15, 2016   Material Design

Material Design Lite – Switch

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 –

Material Design Lite – Switch Button Example:

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.

Material Design Lite – Switch Button Example

Example

Now let us create a simple switch button –

Material Design Lite Switch Button Example:

Try it »

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

Material Design Lite – Switch Button Example

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.

Learn More

Let us create some more example and demo.

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 –

Material Design Lite Switch Button with ripple effect Example:

Try it »

Read More
August 15, 2016   Material Design

Material Design Lite – Icon Toggle

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 –

Material Design Lite – Toggle Icon Example:

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

Material Design Lite – Icon Toggle Example:

Try it »

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

Material Design Lite – Icon Toggle Example

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.
Read More
August 13, 2016   Material Design

Material Design Lite – Radio Button

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-

Material Design Lite – Radio Button Syntax:

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.

Material Design Lite – Radio Button Example:

Try it »

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

Material Design Lite – Radio Button
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.

Learn More

Let us create some more examples and demos here.

Material Design Lite RadioBox: Checked | Selected | Example

Material Design Lite RadioBox: Checked | Selected | Example

Try it »

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

Material Design Lite Radio Button : Ripple Effect

Material Design Lite Radio Button : Ripple Effect

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

Material Design Lite Radio Button : Ripple Effect | Example

Try it »

Read More
August 10, 2016   Material Design

Material Design Lite – Checkbox

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-

Material Design Lite – Checkbox Syntax:

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.

Material Design Lite – Checkbox Example:

Try it »

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

Material Design Lite – Checkbox
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.

Learn More

Let us create some more examples and demos here.

Material Design Lite Checkbox : Checked | ON | Example

Material Design Lite Checkbox : Checked | ON | Example

Try it »

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

MDL checkbox Checked

Material Design Lite Checkbox : UnChecked | OFF | Example

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

Material Design Lite Checkbox : Unchecked | OFF | Example

Try it »

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

MDL off checkbox

Material Design Lite Checkbox : Ripple Effect

You can add ripple effect simply as below –

Material Design Lite Checkbox : Ripple Effect | Example

Try it »

Material Design Lite Checkbox : Disabled State

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

Material Design Lite Checkbox : Disabled State | Example

Try it »

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

Material Design Lite Checkbox : Disabled State Example

Read More
August 3, 2016   Material Design

Material Design Lite – Sliders

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 –

Material Design Lite – Sliders: Example

Try it »

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

MDL SLIDESRS EXAMPLE

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 –

Material Design Lite – Sliders: Example

Try it »

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

Material Design Lite – Sliders

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.
Read More
August 3, 2016   Material Design

Material Design Lite – Menus

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 –

Material Design Lite – Lower Left Menu Example:

 



    
   
  • Action 1
    • 
  
  • Action 2 Disabled
    • 
  
  • Action 3
    •

Try it »

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

Material Design Lite – Menus

Lower Right Menu

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

Material Design Lite – Lower Right Menu Example:

 



    
  
  • Action 1
    • 
  
  • Action 2 Disabled
    • 
  
  • Action 3
    •

Try it »

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

Material Design Lite – Menus

Top Left Menu

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

Material Design Lite – Top Left Menu Example:

 




    
    
  • Action 1
    • 
  
  • Action 2 Disabled
    • 
  
  • Action 3
    •

Try it »

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

Material Design Lite – Top Left Menu Example:

Top Right Menu

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

Material Design Lite – Top Right Menu Example:

 




    
  
  • Action 1
    • 
  
  • Action 2 Disabled
    • 
  
  • Action 3
    •

Try it »

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

Material Design Lite – Top Right Menu Example:

Read More
July 31, 2016   Material Design

Material Design Lite – Loading

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-

Material Design Lite – Default Progress Bar Example:

Try it »

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

Material Design Lite – Loading | Progress Bar

Indeterminate Progress Bar-

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

Material Design Lite Indeterminate Progress Bar Example:

Try it »

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

Material Design Lite – Loading

Buffering-

You can create progress for buffering as below –

Material Design Lite Buffering Progress Bar Example:

Try it »

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

Buffering Progress Bar
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 –

Material Design Lite Default Spinner Example:

Try it »

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

Material Design Lite Spinner

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 –

Material Design Lite single Spinner Example:

Try it »

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

Material Design Lite Single Color Spinner Example

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.
Read More
« Older posts