Desain Material Lite - Tombol Radio
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis tombol radio. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-radio Mengidentifikasi label sebagai komponen MDL dan diperlukan pada elemen label. |
| 2 | mdl-js-radio Menetapkan perilaku MDL dasar ke label dan diperlukan pada elemen label. |
| 3 | mdl-radio__button Menyetel perilaku dasar MDL ke radio dan diperlukan pada elemen masukan (tombol radio). |
| 4 | mdl-radio__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 (tombol radio). |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan kelas mdl-slider untuk menampilkan berbagai jenis tombol radio.
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>Hasil
Verifikasi hasilnya.