Material Design Lite 文本框

2018-12-19 18:17 更新

该MDL提供多种CSS类各种预先定义的外观和行为增强功能适用于显示各种类型的文本输入。下表中提到的可用类和它们的影响。

SN	类名称和说明
1	MDL-文本框标识容器作为MDL成分，是必需的“外”的div元素。
2	MDL-JS-文本框设置基本MDL行为输入和需要“外”的div元素。
3	MDL-textfield__input 标识元素作为文本框输入需要输入或textarea元素。
4	MDL-textfield__label 标识元素作为文本字段标签，需要输入或textarea的元素标签元素。
五	MDL-文本框-浮动标签适用浮动标签效应，是可选的;去“外”的div元素。
6	MDL-textfield__error 标识跨度为MDL错误消息，并且是可选的;去与模式MDL输入元素跨度元素上。
7	MDL-文本框-扩展标识的div作为MDL扩展的文本字段容器;用于扩展输入字段，并要求“外”的div元素。
8	MDL-按钮标签标识作为MDL图标按钮;用于扩展输入字段，并要求“外”的div标签元素。
9	MDL-JS-按钮设置基本行为图标容器;用于扩展输入字段，并要求“外”的div标签元素。
10	MDL-按钮-图标标签标识作为MDL图标容器;用于扩展输入字段，并要求“外”的div标签元素。
11	MDL-input__expandable持有人标识为一个MDL成分的容器;用于扩展输入字段，并且需要“内部”的div元素。
12	是无效的标识文本框的初始加载为无效，MDL-文本框元素可选。

例

下面的例子展示了使用MDL-文本框类，以显示不同类型的文本框的。

mdl_textfields.htm

<html>
<head>
   <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
   <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank" >
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank" >	  
   <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>

结果

验证结果。

以上内容是否对您有帮助：

← Material Design Lite 数据表

Material Design Lite 工具提示 →

写笔记

我要补充