Skip to content

Latest commit

 

History

History
213 lines (116 loc) · 7.4 KB

text-fields.md

File metadata and controls

213 lines (116 loc) · 7.4 KB
layout title permalink
page
文本框
text-fields.html

文本框

文本框可以让用户输入文本。它们可以是单行的,带或不带滚动条,也可以是多行的,并且带有一个图标。点击文本框后显示光标,并自动显示键盘。除了输入,文本框可以进行其他任务操作,如文本选择(剪切,复制,粘贴)以及数据的自动查找功能。详情见 模式 > 选择 文本选择的设计。

文本字段可以有不同的输入类型。类型决定文本框内允许输入什么样的字符,可能会提示虚拟键盘调整其布局来显示最常用的字符。常见的类型包括数字,文本,电子邮件地址,电话号码,个人姓名,用户名,地址,街道地址,信用卡号码,PIN码,以及搜索查询。

单行文本框

当文本输入光标到达输入区域的最右边,单行文本框自动滚动到内容的左边。

浅色主题

  • 提示和输入字体:roboto regular 16 sp
  • 输入框高度:48 dp
  • 文本顶部和底部填充:16 dp
  • 文本字段分隔填充:8 dp

暗色主题

红色标线

带有图标的浅色主题

  • 提示和输入字体:roboto regular 16 sp
  • 输入框高度:48 dp
  • 文本顶部和底部填充:16 dp
  • 文本字段分隔填充:8 dp

带有图标的暗色主题

红色标线

单行带有滚动条

单行带有滚动条

当在单行文本字段输入过长,需跨越多行,则文本字段应该以滚动形式容纳文本。

在滚动文本字段,一个图形化的指示灯出现在线的下面。点击省略号,光标返回到字符的开头。

浅色主题

深色主题

浮动标签

浮动标签

浮动内嵌标签,当用户进行文本输入,标签漂浮在上方。

浅色主题

  • 提示和输入字体:roboto regular 16 sp
  • 标签字体:roboto regular 12 sp
  • 输入框高度:72 dp
  • 文本顶部和底部填充:16 dp
  • 文本字段分隔填充:8 dp

深色主题

红色标线

多行文本框

当光标到达最下缘,多行文本自动断开,使文本可以换行和垂直滚动。

浅色主题

  • 提示和输入字体:roboto regular 16 sp
  • 标签字体:roboto regular 12 sp
  • 文本顶部和底部填充:16 dp
  • 文本字段分隔填充:8 dp

深色主题

红色标线

全宽度的文本字段

全宽度的文本字段适用于更深入的工作。

单行和多行文本

  • 提示和输入字体:roboto regular 16 sp
  • 顶部和底部填充文本:20 dp

红色标线

字符计数器

使用字段的字符计数器,能精准限制其中的字符。

单行字符计数器

计数器是roboto regular 12 sp

多行字符计数器

计数器文本:roboto regular 12 sp

完整文本计数器

自动完成文本框

当有窗口弹出实时的建议或自动填充时使用自动完成文本字段,这样用户就可以更准确,更高效地输入信息。

全宽度自动完成

插入自动完成

全宽行内自动完成

在线自动完成

搜索过滤器

应用栏可以作为一个文本输入字段。当用户输入时,对下面的内容进行过滤和排序。

在应用程序栏中的全宽度的文本字段