Material Design Lite - Hộp kiểm
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. 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-checkbox 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-checkbox Đặ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-checkbox__input Đặt hành vi MDL cơ bản thành hộp kiểm và được yêu cầu trên phần tử đầu vào (hộp kiểm). |
| 4 | mdl-checkbox__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 (hộp kiểm). |
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 hộp kiểm khác nhau.
mdl_checkboxes.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 CheckBox</td><td>CheckBox with Ripple Effect</td>
<td>Disabled CheckBox</td></tr>
<tr>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
<input type = "checkbox" id = "checkbox1"
class = "mdl-checkbox__input" checked>
<span class = "mdl-checkbox__label">Married</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
for = "checkbox2">
<input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
<span class = "mdl-checkbox__label">Single</span>
</label>
</td>
<td>
<label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
<input type = "checkbox" id = "checkbox3"
class = "mdl-checkbox__input" disabled>
<span class = "mdl-checkbox__label">Don't know (Disabled)</span>
</label>
</td>
</tr>
</table>
</body>
</html>Kết quả
Xác minh kết quả.