Material Design Lite - Champs de texte
MDL fournit une gamme de classes CSS pour appliquer diverses améliorations visuelles et comportementales prédéfinies et afficher les différents types d'entrées de texte. Le tableau suivant répertorie les classes disponibles et leurs effets.
| N ° Sr. | Nom et description de la classe |
|---|---|
| 1 | mdl-textfield Identifie le conteneur en tant que composant MDL et est requis sur l'élément div "externe". |
| 2 | mdl-js-textfield Définit le comportement MDL de base en entrée et est requis sur l'élément div "externe". |
| 3 | mdl-textfield__input Identifie l'élément comme entrée de champ de texte et est requis sur l'élément d'entrée ou de zone de texte. |
| 4 | mdl-textfield__label Identifie l'élément comme étiquette de champ de texte et est requis sur l'élément d'étiquette pour les éléments d'entrée ou de zone de texte. |
| 5 | mdl-textfield--floating-label Applique un effet d'étiquette flottante et est facultatif; passe sur l'élément div "externe". |
| 6 | mdl-textfield__error Identifie span comme un message d'erreur MDL et est facultatif; passe sur l'élément span pour l'élément d'entrée MDL avec motif. |
| sept | mdl-textfield--expandable Identifie un div comme un conteneur de champ de texte extensible MDL; utilisé pour les champs d'entrée extensibles, et est requis sur l'élément div "externe". |
| 8 | mdl-button Identifie l'étiquette comme un bouton d'icône MDL; utilisé pour les champs d'entrée extensibles, et est requis sur l'élément d'étiquette de div "externe". |
| 9 | mdl-js-button Définit le comportement de base du conteneur d'icônes; utilisé pour les champs d'entrée extensibles, et est requis sur l'élément d'étiquette de div "externe". |
| dix | mdl-button--icon Identifie l'étiquette en tant que conteneur d'icônes MDL; utilisé pour les champs d'entrée extensibles, et est requis sur l'élément d'étiquette de div "externe". |
| 11 | mdl-input__expandable-holder Identifie un conteneur en tant que composant MDL; utilisé pour les champs de saisie extensibles et requis sur l'élément div "interne". |
| 12 | is-invalid Identifie le champ de texte comme non valide lors du chargement initial et est facultatif sur l'élément mdl-textfield. |
Exemple
L'exemple suivant vous aidera à comprendre l'utilisation des classes mdl-textfield pour afficher les différents types de champs de texte.
mdl_textfields.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>Simple Text Field</td><td>Numeric Text Field</td>
<td>Disabled Text Field</td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text" id = "text1">
<label class = "mdl-textfield__label" for = "text1">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
<label class = "mdl-textfield__label" for = "text2">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
id = "text3" disabled>
<label class = "mdl-textfield__label" for = "text3">
Disabled...</label>
</div>
</form>
</td>
</tr>
<tr><td>Simple Text Field with Floating Label</td>
<td>Numeric Text Field with Floating Label</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text" id = "text4">
<label class = "mdl-textfield__label" for = "text4">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
<label class = "mdl-textfield__label" for = "text5">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td> </td>
</tr>
<tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<textarea class = "mdl-textfield__input" type = "text" rows = "3"
id = "text7" ></textarea>
<label class = "mdl-textfield__label" for = "text7">Lines...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class = "mdl-button mdl-js-button mdl-button--icon"
for = "text8">
<i class = "material-icons">search</i>
</label>
<div class = "mdl-textfield__expandable-holder">
<input class = "mdl-textfield__input" type = "text" id = "text8">
<label class = "mdl-textfield__label" for = "sample-expandable">
Expandable Input</label>
</div>
</div>
</form>
</td>
<td> </td>
</tr>
</table>
</body>
</html>Résultat
Vérifiez le résultat.