Materializar - Interruptores

Ejemplo

El siguiente ejemplo muestra diferentes tipos de conmutadores. Una casilla de verificación tiene el estilo de un interruptor aplicando el interruptor de clase en su contenedor div principal.

materialize_switches.htm

<html>
   <head>
      <title>The Materialize Switches Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container">   
      <div class = "row">
         <form class = "col s12">
            <div class = "row">
               <label>Materialize Switch</label>
               <div class = "switch"><label>Off<input type = "checkbox" checked>
                  <span class = "lever"></span>On</label></div> 
            </div>
            
            <div class = "row">
               <label>Materialize Disabled Switch</label>
               <div class = "switch"><label>Off<input disabled type = "checkbox">
                  <span class = "lever"></span>On</label></div>          
            </div>
         </form>       
      </div>
   </body>   
</html>

Resultado

Verifique el resultado.

↰ Previous page