Material Design Lite - Boutons radio

MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types de boutons radio. Le tableau suivant répertorie les classes disponibles et leurs effets.

N ° Sr. Nom et description de la classe
1

mdl-radio

Identifie l'étiquette en tant que composant MDL et est obligatoire sur l'élément d'étiquette.
2

mdl-js-radio

Définit le comportement MDL de base sur label et est requis sur l'élément label.
3

mdl-radio__button

Définit le comportement MDL de base sur radio et est requis sur l'élément d'entrée (bouton radio).
4

mdl-radio__label

Définit le comportement MDL de base sur légende et est requis sur l'élément span (légende).
5

mdl-js-ripple-effect

Définit l'effet de clic ondulé et est facultatif; va sur l'élément label et non sur l'élément d'entrée (bouton radio).

Exemple

L'exemple suivant vous aidera à comprendre l'utilisation des classes mdl-slider pour afficher les différents types de boutons radio.

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>

Résultat

Vérifiez le résultat.