MDL提供了一系列CSS类来应用各种预定义的视觉和行为增强功能,并显示不同类型的文本输入.下表列出了可用的类及其效果.
Sr.No. | Class Name&描述 |
---|---|
1 | mdl-textfield 将容器标识为MDL组件,并且在"外部"div元素上是必需的. |
2 | mdl-js-textfield 将基本MDL行为设置为输入,并且在"外部"div元素上是必需的. |
3 | mdl-textfield__input 将元素标识为文本字段输入,并且在input或textarea元素上是必需的. |
4 | mdl-textfield__label 将元素标识为文本字段标签,并且对于input或textarea元素的label元素是必需的. |
5 | mdl-textfield - floating-label 应用浮动标签效果,是可选的;继续"外部"div元素. |
6 | mdl-textfield__error 将范围标识为MDL错误消息,并且是可选的;继续使用带有模式的MDL输入元素的span元素. |
7 | mdl-textfield - expandable 将div标识为MDL可扩展文本字段容器;用于可扩展的输入字段,在"外部"div元素上是必需的. |
8 | mdl-button 标识标签作为MDL图标按钮;用于可扩展的输入字段,并且在"外部"div的标签元素上是必需的. |
9 | mdl-js-button 将基本行为设置为图标容器;用于可扩展的输入字段,并且在"外部"div的标签元素上是必需的. |
10 | mdl-button - icon 将标签标识为MDL图标容器;用于可扩展的输入字段,并且在"外部"div的标签元素上是必需的. |
11 | mdl-input__expandable-holder 将容器标识为MDL组件;用于可扩展的输入字段,并且在"inner"div元素上是必需的. |
12 | 无效 标识textfield在初始加载时无效,在mdl-textfield元素上是可选的. |
以下示例将帮助您了解使用mdl-textfield类来显示不同类型的文本字段.
<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>
验证结果.