Material Design Lite组件之文本框

1.介绍

Material Design Lite（MDL）文本框组件是标准HTML <input type =“text”>和<input type =“textarea”>元素的增强版。文本字段由一个水平线组成，指示键盘输入可以发生的位置，并且通常包含明确传达文本字段的预期内容的文本。 MDL文本字段组件提供各种类型的文本字段，并允许您添加显示效果和点击效果。

2.配置选项

类名	效果	其他
mdl-textfield	定义容器为MDL组件	最外层div必需
mdl-js-textfield	为文本框添加默认事件	最外层div必需
mdl-textfield__input	input文本框样式	input或者textare标签必需
mdl-textfield__label	定义文本框对应的label样式	文本框的label标签必需
mdl-textfield--floating-label	设置label标签浮动效果	最外层div可选
mdl-textfield__error	错误信息提示样式	可选
mdl-textfield--expandable	设置一个div作为文本框输入的扩展容器	用于扩展容器的最外层div
mdl-button	设置icon按钮	用于扩展容器的最外层div
mdl-js-button	设置icon按钮默认事件	用于扩展容器的最外层div
mdl-button--icon	设置按钮为icon组件	用于扩展容器的最外层div
mdl-input__expandable-holder	将容器定义为MDL组件	用于扩展容器的最外层div
is-invalid	在初始加载时将文本字段定义为无效	可选

注：input可用disable禁用

3.举例说明

3.1.普通文本框

<!-- Simple Textfield -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="sample1">
    <label class="mdl-textfield__label" for="sample1">Text...</label>
  </div>
</form>
<!-- Numeric Textfield -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample2">
    <label class="mdl-textfield__label" for="sample2">Number...</label>
    <span class="mdl-textfield__error">Input is not a number!</span>
  </div>
</form>

3.2.浮动文本框

<!-- Textfield with Floating Label -->

<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample3">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>
</form>
<!-- Numeric Textfield with Floating Label -->
<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="sample4">
    <label class="mdl-textfield__label" for="sample4">Number...</label>
    <span class="mdl-textfield__error">Input is not a number!</span>
  </div>
</form>

3.3.带扩展文本框

<!-- Floating Multiline Textfield -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield">
    <textarea class="mdl-textfield__input" type="text" rows= "3" id="sample5" ></textarea>
    <label class="mdl-textfield__label" for="sample5">Text lines...</label>
  </div>
</form>
<!-- Expandable Textfield -->
<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
    <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6">
      <i class="material-icons">search</i>
    </label>
    <div class="mdl-textfield__expandable-holder">
      <input class="mdl-textfield__input" type="text" id="sample6">
      <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label>
    </div>
  </div>
</form>