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ả.