Material Design Lite - Optionsfelder

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

Sr.Nr. Klassenname & Beschreibung
1

mdl-radio

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

2

mdl-js-radio

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

3

mdl-radio__button

Setzt das grundlegende MDL-Verhalten auf Radio und ist für das Eingabeelement (Optionsfeld) erforderlich.

4

mdl-radio__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 (Optionsfeld).

Beispiel

Das folgende Beispiel hilft Ihnen, die Verwendung der mdl-slider-Klassen zum Anzeigen der verschiedenen Arten von Optionsfeldern zu verstehen.

mdl_radio.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 Radio Button</td><td>Radio Button with Ripple Effect</td>
            <td>Disabled Radio Button</td></tr>
         <tr>
            <td> 
               <label class = "mdl-radio mdl-js-radio" for = "option1">
                  <input type = "radio" id = "option1" name = "gender" 
                     class = "mdl-radio__button" checked>
                  <span class = "mdl-radio__label">Male</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect" 
                  for = "option2">
                  <input type = "radio" id = "option2" name = "gender" 
                     class = "mdl-radio__button" >
                  <span class = "mdl-radio__label">Female</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio" for = "option3">
                  <input type = "radio" id = "option3" name = "gender" 
                     class = "mdl-radio__button" disabled>
                  <span class = "mdl-radio__label">Don't know (Disabled)</span>
               </label>      
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Ergebnis

Überprüfen Sie das Ergebnis.