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:

<label for="switch-btn" class="mdl-switch mdl-js-switch">
  <input type="checkbox" id="switch-btn" class="mdl-switch__input">
  <span class="mdl-switch__label">Button Name</span>
</label>

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:

<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
</head>
<body>
<label for="switch-btn" class="mdl-switch mdl-js-switch">
  <input type="checkbox" id="switch-btn" class="mdl-switch__input">
  <span class="mdl-switch__label">Volume off/on</span>
</label>
</body>
</html>

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:

<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script>
</head>
<body>
<label for="switch-btn" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
  <input type="checkbox" id="switch-btn" class="mdl-switch__input">
  <span class="mdl-switch__label">Volume off/on Ripple Effect</span>
</label>
</body>
</html>

Try it ยป


Advertisements

Add Comment

๐Ÿ“– Read More