Material design - Components – Chips

Chips - 纸片

Chips represent complex entities in small blocks, such as a contact.
A chip may contain entities such as a photo, text, rules, an icon, or a contact.
Contact chips may represent contact information in a compact way.

【翻译】
纸片表示小块中的复杂实体,例如联系人。 芯片可以包含诸如照片,文本,规则,图标或联系人之类的实体。
联系人纸片可以以紧凑的方式表示联系人信息。

Behavior - 行为

Selecting a chip opens a full detail view.
Chips may be deleted if they display a delete icon.

【翻译】
选择纸片打开完整的详细视图。
如果纸片显示删除图标,则可能会被删除。

Specs - 规格

Height: 32dp
Label: 13sp Roboto Regular, 87% black

【翻译】
高:32dp
标签:13sp Roboto Regular,87%black

Usage - 用法

A chip may contain a photo, short title, and brief information.

【翻译】
纸片可以包含照片,短标题和简要信息。

Types of chips - 纸片类型

Chips can be used for various types of entities, including free form text, predefined text, rules, or contacts. Chips may also contain icons.

【翻译】
纸片可用于各种类型的实体,包括自由格式文本,预定义文本,规则或联系人。纸片也可以包含图标。

image

Chips with text
Chip label
13sp Roboto Regular
87% black

【翻译】
带文本的纸片
纸片标签
13sp Roboto Regular
87%黑色

[图片上传失败...(image-d2731d-1552295946502)]
Chips with text and an icon

【翻译】
带文本和图标的纸片

Behavior - 行为

Opening chips - 打开纸片

Touching a chip opens a full detailed view (either in a card or full screen) or a menu of options related to that chip.

【翻译】
触摸纸片打开完整的详细视图(在卡或全屏)或与该纸片相关的选项的菜单。

Deleting chips - 删除纸片

Chips can be deletable or non-deletable. Display a delete icon if a chip is deletable.

【翻译】
纸片可以是可删除的或不可删除的。如果纸片可删除,显示删除图标。


Users may press the delete icon or use the keyboard “Delete” button to remove a chip.

【翻译】
用户可以按删除图标或使用键盘“删除”按钮删除纸片。

Contact chips - 联系人纸片

Contact information that users have for people may be represented in a compact way using contact chips. The chips are invoked and inserted into a text field (usually the “To” field) when the user starts typing a contact’s name, sees the contact’s addresses, and selects the correct one. Contact chips can be added directly to a text field from a menu of contacts.

Contact chips efficiently confirm that the user will be sending their message to the correct person.

【翻译】
可以使用联系人纸片以紧凑的方式表示用户对人的联系信息。 当用户开始键入联系人的姓名,查看联系人的地址并选择正确的姓名时,会调用芯片并将其插入到文本字段(通常为“收件人”字段)中。 联系人纸片可以从联系人菜单直接添加到文本字段。
联系人纸片有效地确认用户将向正确的人发送他们的消息。

[图片上传失败...(image-8ad46f-1552295946502)]
The user confirms the name(s) of the email recipient(s) on the contact chips.

【翻译】

用户确认联系人纸片上的电子邮件接收者的姓名。

[图片上传失败...(image-36a146-1552295946502)]
The user confirms which email address to select on the contact chip.

【翻译】
用户确认在联系人纸片上选择哪个电子邮件地址。

image

The contact chip has different states: Normal, Focused, Pressed, and Activated.

【翻译】
联系人纸片具有不同的状态:正常,聚焦,按压和激活。

Specs - 规格

Single-line chips

【翻译】
单栏纸片

image

Deletable chip
Height: 32dpLabel left padding: 12dp
Remove icon
Size: 24dp x 24dpColor & opacity: 54% blackMargin: 4dp
On desktop, the “Remove” icon is persistent.

【翻译】
可删除纸片
高:32dp
标签左填充:12dp
删除图标
尺寸:24dp x 24dp
颜色和不透明度:54%黑色
边:4dp
在桌面上,“删除”图标是持久的。

image

Non-d****eletable chip
Height: 32dpLabel left and right padding: 12dp
Contact chip
Height: 32dpLabel left padding: 8dpLabel right padding: 12dp

【翻译】
不可删除的芯片
高:32dp
标签左右填充:12dp
联系人纸片
高:32dp
标签左填充:8dp
标签右边填充:12dp

Contact chips - 联系人纸片
****Closed contact chip - 关闭状态的联系人纸片****
The contact name text is Roboto Regular 14sp.
Upon focus, the chip rises to an elevation of 2dp. When pressed, it expands to show alternative addresses for the contact.

【翻译】
联系人纸片文本是Roboto Regular 14sp。
在焦点上,芯片上升到2dp的高度。按下时,它会展开以显示联系人的其他地址。

****Open contact chip - 打开状态的联系人纸片****
Contact name text: Roboto Regular 16sp
Address text: Roboto Regular 14sp
Elevation of the open contact chip is 8dp.
On press, the contact chip closes automatically.
By default, the top field is activated and focused.

【翻译】
联系人姓名text:Roboto Regular 16sp
地址文本:Roboto Regular 14sp
打开状态的联系人纸片的高度为8dp。
按下时,纸片自动关闭。 默认情况下,顶部字段被激活和聚焦。

[图片上传失败...(image-7ffa25-1552295946502)]
Contact chip
Height: 32dpTitle top, bottom, and left padding: 8dp
Title right padding: 12dp

【翻译】
联系人纸片
高:32dp
标题顶部,底部和左侧填充:8dp
标题右边填充:12dp

image

Focused and activated contact chip
Height: 40dpTop and bottom padding: 16dp
Unfocused contact chips
Top and bottom padding: 20dp

【翻译】
聚焦和激活联系人纸片
高:40dp
顶部和底部填充:16dp
未聚焦的联系人纸片
顶部和底部填充:20dp

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容

  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,325评论 0 10
  • 父亲说 咱村的名字得源于村子对面的两座山和村子座落的山 父亲说 他也不知道咱村最早一代什么时候从什么地方迁移过来的...
    武陵清泉阅读 464评论 4 8
  • 顺为资本合伙人周航在自己的个人微信公众号“还是不举手就发言”上发表了一篇文章,谈了他对创业的看法。 对这个观点记忆...
    淮源笑笑生阅读 413评论 0 1
  • 宝宝放学玩过到家就要剪纸,剪了个台灯还唱起来了,自己编的:小夜灯,真顽皮,真漂亮,还有一个真我记不得了!宝宝连说了...
    幽香_5126阅读 170评论 1 0