Material Design Lite - Kontrollkästchen

MDL bietet eine Reihe von CSS-Klassen, mit denen verschiedene vordefinierte visuelle und Verhaltensverbesserungen angewendet und die verschiedenen Arten von Kontrollkästchen angezeigt werden können. In der folgenden Tabelle sind die verfügbaren Klassen und ihre Auswirkungen aufgeführt.

Sr.Nr. Klassenname & Beschreibung
1

mdl-checkbox

Identifiziert label als MDL-Komponente und ist für das label-Element erforderlich.

2

mdl-js-checkbox

Legt das grundlegende MDL-Verhalten auf label fest und ist für das label-Element erforderlich.

3

mdl-checkbox__input

Setzt das grundlegende MDL-Verhalten auf das Kontrollkästchen und ist für das Eingabeelement (Kontrollkästchen) erforderlich.

4

mdl-checkbox__label

Setzt das grundlegende MDL-Verhalten auf Beschriftung und ist für das span-Element (Beschriftung) erforderlich.

5

mdl-js-ripple-effect

Legt den Ripple-Click-Effekt fest und ist optional. geht auf das Beschriftungselement und nicht auf das Eingabeelement (Kontrollkästchen).

Beispiel

Das folgende Beispiel hilft Ihnen dabei, die Verwendung der mdl-slider-Klassen zu verstehen, um die verschiedenen Arten von Kontrollkästchen anzuzeigen.

mdl_checkboxes.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
            <td>Disabled CheckBox</td></tr>
         
         <tr>
            <td> 
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
                  <input type = "checkbox" id = "checkbox1" 
                     class = "mdl-checkbox__input" checked>
                  <span class = "mdl-checkbox__label">Married</span>
               </label>
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" 
                  for = "checkbox2">
                  <input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
                  <span class = "mdl-checkbox__label">Single</span>
               </label>	  
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
                  <input type = "checkbox" id = "checkbox3" 
                     class = "mdl-checkbox__input" disabled>
                  <span class = "mdl-checkbox__label">Don't know (Disabled)</span>
               </label>	   
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.