"Material Design Visual Design Language" UI component Designing (iii): Slips

Guo Xiaoxing
Weibo: Guo Xiaoxing's Sina Weibo
Email:[email protected]
Blog: http://blog.csdn.net/allenwells
Github:https://github.com/allenwells

A piece of paper (Chips) is a small block view of a complex entity (for example, a calendar event or contact) that can contain a picture, a short string or a truncated string, or other concise information about a physical object.

The Chips can be conveniently operated by means of a tug. A push action can trigger a view of the chip's corresponding entity in a suspended card (or a full-screen view), or a pop-up action menu related to the chip entity.

A contact slip

The contact's paper view is used to render information about the contact person. When a user enters the name of a contact in the input box (the recipient column), the contact paper view is triggered to show the contact's address for the user to select. And the contact's paper can be added directly to the recipient column.

1.1 Closing status of the contact slip

The name of the contact is used in the following font: Roboto, General, 14SP, as shown:

1.2 The open state of the contact slip

When you click on the contact sheet view in the off state, it expands and displays the address of the contact person.

• By default, the topmost contact is activated and selected

• The font of the contact name is: Roboto, General, 16SP

• The font for address text is: Roboto, General, 14SP

When the user chooses, the paper view is closed as shown:

Copyright NOTICE: When we seriously to do one thing, we can find the endless fun, colorful technology like the scenery on the road, while walking to appreciate.

"Material Design Visual Design Language" UI component Designing (iii): Slips