Material Design Lite - Kotak centang
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis kotak centang. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-checkbox Mengidentifikasi label sebagai komponen MDL dan diperlukan pada elemen label. |
| 2 | mdl-js-checkbox Menetapkan perilaku MDL dasar ke label dan diperlukan pada elemen label. |
| 3 | mdl-checkbox__input Menetapkan perilaku MDL dasar ke kotak centang dan diperlukan pada elemen masukan (kotak centang). |
| 4 | mdl-checkbox__label Menetapkan perilaku MDL dasar ke teks dan diperlukan pada elemen rentang (keterangan). |
| 5 | mdl-js-ripple-effect Menyetel efek klik riak dan bersifat opsional; berjalan pada elemen label dan bukan pada elemen masukan (kotak centang). |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan kelas mdl-slider untuk menampilkan berbagai jenis kotak centang.
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>Hasil
Verifikasi hasilnya.