Material Design Lite - Radyo Düğmeleri

MDL, önceden tanımlanmış çeşitli görsel ve davranışsal geliştirmeleri uygulamak ve farklı radyo düğmelerini görüntülemek için bir dizi CSS sınıfı sağlar. Aşağıdaki tablo, mevcut sınıfları ve etkilerini listeler.

Sr.No. Sınıf Adı ve Tanımı
1

mdl-radio

Etiketi bir MDL bileşeni olarak tanımlar ve etiket öğesinde gereklidir.

2

mdl-js-radio

Etiketlenecek temel MDL davranışını ayarlar ve etiket öğesinde gereklidir.

3

mdl-radio__button

Temel MDL davranışını radyoya ayarlar ve giriş öğesinde (radyo düğmesi) gereklidir.

4

mdl-radio__label

Temel MDL davranışını resim yazısına ayarlar ve yayılma öğesi (başlık) için gereklidir.

5

mdl-js-ripple-effect

Dalgalanma tıklama efektini ayarlar ve isteğe bağlıdır; giriş öğesinde değil (radyo düğmesi) etiket öğesinin üzerine gider.

Misal

Aşağıdaki örnek, farklı radyo düğmelerini göstermek için mdl-slider sınıflarının kullanımını anlamanıza yardımcı olacaktır.

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>

Sonuç

Sonucu doğrulayın.