Material Design Lite - Boutons radio
MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types de boutons radio. Le tableau suivant répertorie les classes disponibles et leurs effets.
| N ° Sr. | Nom et description de la classe |
|---|---|
| 1 | mdl-radio Identifie l'étiquette en tant que composant MDL et est obligatoire sur l'élément d'étiquette. |
| 2 | mdl-js-radio Définit le comportement MDL de base sur label et est requis sur l'élément label. |
| 3 | mdl-radio__button Définit le comportement MDL de base sur radio et est requis sur l'élément d'entrée (bouton radio). |
| 4 | mdl-radio__label Définit le comportement MDL de base sur légende et est requis sur l'élément span (légende). |
| 5 | mdl-js-ripple-effect Définit l'effet de clic ondulé et est facultatif; va sur l'élément label et non sur l'élément d'entrée (bouton radio). |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation des classes mdl-slider pour afficher les différents types de boutons 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>Résultat
Vérifiez le résultat.