카테고리 없음

Components - Subheaders(List, Grid, Menu)

알 수 없는 사용자 2015. 9. 6. 02:42

출처 : http://www.google.com/design/spec/components/subheaders.html


     List subheaders

Tile height: 48dp
Subheader font: Roboto Medium 14sp

Subheader color can either be the secondary grey text value (54% black) or the primary color of the app.

In long lists of complex information, consider using colored subheaders to delineate content. An example of the use of color for subheaders is in Android settings.

A subheader should be left-aligned with an avatar/icon in a list, unless there is a promoted action in that space.

Grey subheader

Padding: 16dp
Subheader tile height: 48dp

Grey subheader in email inbox.

If there is a floating action button left-aligned with the avatar/icon in a list, align the subheader with the text content.

With a left-aligned floating action button, the subheader is, aligned with the text content.

Subheader tile height: 48dp
Floating action button tile width: 72dp

The subheader is in the primary color of the app and aligned with the text because of the left-aligned floating action button.

Grid subheaders

Tile height: 48dp
Subheader font: Roboto Medium 14sp
Subheader is aligned 16dp from the left edge

The grid subheader is aligned 16dp from the left edge. The height of the grid subheader tile is 48dp.

Grid subheaders for the months of the year in a photo album

Menu subheaders

Tile height: 48dp
Subheader font: Roboto Medium 14sp
Subheader is aligned 16dp from the left edge

Menu subheader specs

Subheader padding from left edge: 16dp
Tile height: 48dp

Example of menu subheader