Material design - Components – C

2016-12-30  本文已影响0人  两个朋友指甲

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

上一篇 下一篇

猜你喜欢

热点阅读