Material Design Lite - Các nút radio

MDL cung cấp một loạt các lớp CSS để áp dụng các cải tiến hình ảnh và hành vi khác nhau được xác định trước và hiển thị các loại nút radio khác nhau. Bảng sau liệt kê các lớp có sẵn và tác dụng của chúng.

Sr.No. Tên & Mô tả Lớp học
1

mdl-radio

Xác định nhãn là một thành phần MDL và được yêu cầu trên phần tử nhãn.

2

mdl-js-radio

Đặt hành vi MDL cơ bản cho nhãn và được yêu cầu trên phần tử nhãn.

3

mdl-radio__button

Đặt hành vi MDL cơ bản cho radio và được yêu cầu trên phần tử đầu vào (nút radio).

4

mdl-radio__label

Đặt hành vi MDL cơ bản thành chú thích và được yêu cầu trên phần tử span (chú thích).

5

mdl-js-ripple-effect

Đặt hiệu ứng nhấp chuột gợn sóng và là tùy chọn; đi trên phần tử nhãn chứ không phải phần tử đầu vào (nút radio).

Thí dụ

Ví dụ sau sẽ giúp bạn hiểu việc sử dụng các lớp mdl-slider để hiển thị các loại nút radio khác nhau.

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>

Kết quả

Xác minh kết quả.