Material Design 组件图鉴 —— Text Fields

Text fields allow users to input, edit, and select text.

原则

  • 可辨认的
  • 可发现的
  • 清晰的

布局

标签(Label)

标签(Label)显示输入框要求输入的内容,每个输入框都要有标签。

有 Resting 和 Floating 两种状态。

输入线(Input line)

选中时输入线、文字标签、游标的颜色都会变成 accent color。 而当出现错误的时候,颜色又会变为定义的警告色。

输入的文字 Input text

有需要的时候自动更变为大写字母,如人名、文件名或是一个句子。

占位文字 Placeholder text(Hint text)

用于进一步说明或示意需键入的内容。

帮助文字 Helper text

进一步对输入框进行解释。

如果有的话帮助文字一定要时刻展示到。

错误提示 Error Message

对错误进行说明并提供解决办法,当错误提示出现的时候,帮助文字不显示。

错误提示起头会带 Error 字样或使用 icon 代替。

必填项 Required field

必填更多的话提示选填。 选填更多的话提示必填。

字数计算

Icon 标记

点击 Icon 或有特别功能,如打开日历选择日期。


状态

各个状态详看下图:

具体尺寸与格式

输入框种类

  • 单行
  • 多行
  • 输入框

单行

还有一行,输入文字过多会变成可滚动,但总是一行的。

多行

可以换行。

输入框

框的高度是固定不变的。

输入框状态:


输入类型

带格式输入

某些输入项目是有格式要求的,这个时候软件应该自动形成格式,限制字数,方便用户理解与操作。

  • 分组
  • 前后缀
  • 密码

其他输入方式

使用菜单或对应的 Pickers


输入框差异

  • 标签作为标题(Dialog)
  • 单个输入框
  • 满屏输入框(页面任务复杂时使用)


输入框盒子 Text field boxes