Material Design Lite - Switches
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis kotak centang sebagai sakelar. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-switch Mengidentifikasi label sebagai komponen MDL dan diperlukan pada elemen label. |
| 2 | mdl-js-switch Menetapkan perilaku MDL dasar ke label dan diperlukan pada elemen label. |
| 3 | mdl-switch__input Menyetel perilaku dasar MDL untuk beralih dan diperlukan pada elemen masukan (sakelar). |
| 4 | mdl-switch__label Menetapkan perilaku MDL dasar ke teks dan diperlukan pada elemen masukan (keterangan). |
| 5 | mdl-js-ripple-effect Menyetel efek klik riak dan bersifat opsional; berjalan pada elemen label dan bukan pada elemen masukan (sakelar). |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan kelas mdl-switch dan jenis kotak centang yang berbeda sebagai switch.
mdl_switches.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 Switch</td><td>Off Switch</td>
<td>Disabled Switch</td></tr>
<tr>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-1">
<input type = "checkbox" id = "switch-1"
class = "mdl-switch__input" checked>
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input">
</label>
</td>
<td>
<label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect"
for = "switch-2">
<input type = "checkbox" id = "switch-2"
class = "mdl-switch__input" disabled>
</label>
</td>
</tr>
</table>
</body>
</html>Hasil
Verifikasi hasilnya.