Material Design Lite - Biểu tượng

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 hộp kiểm khác nhau dưới dạng biểu tượng. 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-icon-toggle

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-icon-toggle

Đặ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-icon-toggle__input

Đặt hành vi MDL cơ bản thành chuyển đổi biểu tượng và được yêu cầu trên phần tử đầu vào (chuyển đổi biểu tượng).

4

mdl-icon-toggle__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ử i (biểu tượng).

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 (biểu tượng-chuyển đổi).

Thí dụ

Ví dụ sau đây cho thấy việc sử dụng mdl-icon-toggle các lớp để hiển thị các loại hộp kiểm khác nhau dưới dạng biểu tượng.

mdl_icons.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">	  
   </head>
   
   <body>
      <table>
         <tr><td>On Icon</td><td>Off Icon</td>
            <td>Disabled Icon</td></tr>
         <tr>
            <td> 
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-1">
                  <input type = "checkbox" id = "icon-toggle-1" 
                     class = "mdl-icon-toggle__input" checked>
                  <i class = "mdl-icon-toggle__label material-icons">format_bold</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input">
                  <i class = "mdl-icon-toggle__label material-icons">format_italic</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input" disabled>
                  <i class = "mdl-icon-toggle__label material-icons">format_underline</i>
               </label>
            </td>
         </tr>
      </table>   
   
   </body>
</html>

Kết quả

Xác minh kết quả.