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