Material Design Lite - Ikon
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis kotak centang sebagai ikon. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-icon-toggle Mengidentifikasi label sebagai komponen MDL dan diperlukan pada elemen label. |
| 2 | mdl-js-icon-toggle Menetapkan perilaku MDL dasar ke label dan diperlukan pada elemen label. |
| 3 | mdl-icon-toggle__input Setel perilaku MDL dasar ke ikon-toggle dan diperlukan pada elemen input (icon-toggle). |
| 4 | mdl-icon-toggle__label Menyetel perilaku dasar MDL ke keterangan dan diperlukan pada elemen i (ikon). |
| 5 | mdl-js-ripple-effect Menyetel efek klik riak dan bersifat opsional; berjalan pada elemen label dan bukan pada elemen masukan (icon-toggle). |
Contoh
Contoh berikut menunjukkan penggunaan mdl-icon-toggle kelas untuk menampilkan berbagai jenis kotak centang sebagai ikon.
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>Hasil
Verifikasi hasilnya.