资讯专栏INFORMATION COLUMN

Material design - 尺寸参考 部分(笔记)

2i18ns / 1108人阅读

Overview

App bar height: 56dp
App bar left and right padding: 16dp
App bar icon top, bottom, left padding: 16dp
App bar title left padding: 72dp
App bar title bottom padding: 20dp

The app bar with significantly increased height for prominence

App bar height = 128dp


Action area height: 56dp

Title area height: 80dp

Title area bottom padding: 8dp

Description area height: 72dp

Description area bottom padding: 16dp

List

A two-column, left-aligned list with a 56dp floating action button.

Keylines and margins

Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Horizontal margins on mobile: 16dp.

Vertical spacing

Status bar: 24dp

Toolbar: 56dp

Subtitle: 48dp

List item: 72dp

Keylines and margins

Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp


Vertical spacing

Status bar: 24dp

Toolbar: 56dp

Title and list items: 72dp

Subtitle: 48dp

Space between content areas: 8dp

Detail view

A detail card with a 56dp floating action button.

Keylines and margins
Screen edge left and right margins: 16dp
Content left margin from screen edge: 72dp
Right-side icons align 32dp from the right edge to coordinate with the floating action button.

Vertical spacing

Status bar: 24dp

Toolbar: 56dp

Space between content areas: 8dp

List item: 72dp

Navigation drawer

A side navigation menu with icons, avatars, and text aligned on the left. Other icons align on the right.

Keylines and margins
Screen edge left and right margins: 16dp
Content associated with an icon or avatar left margin: 72dp
Side nav width: The screen width minus the height of the action bar. Here, the width is 56dp from the right screen edge.

Vertical spacing

Account menu and list items: 48dp

Space between content areas: 8dp

Navigation right margin: 56dp

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/12650.html

相关文章

  • Material Design 组件之 FloatingActionButton

    摘要:是类型的按钮控件,一般表现是浮动在上层的圆形图标,有自己的并可以设置锚点。有两种大小,分别是和,默认是,其大小可以通过属性来指定需要的大小,当然也可以设置为,系统会根据不同的屏幕选择合适的大小。 Material Design 设计规范在 Google I/O 2014 推出,这种设计理念一经推出就受到广大开发者的喜爱,主要侧重于纸墨化创作和突出设计的实体感,使得设计更接近于真实世界,...

    smartlion 评论0 收藏0
  • RxJavaAndroid - 收藏集 - 掘金

    摘要:框架基于的一款新闻阅读掘金,一款新闻阅读框架,基于,基本涵盖了当前端开发最常用的主流框架,基于此框架可以快速开发一个。本文已授权任阅小说阅读器,高仿追书神器掘金任阅小说阅读器。掘金清风音乐,一款安卓音乐播放器,基于。 AndroidFire框架--基于 Material Design+MVP+RxJava+Retrofit+Glide的一款新闻阅读 App - 掘金AndroidFir...

    Magicer 评论0 收藏0
  • 认识一下 Material Design Lite 布局组件

    摘要:布局组件需要按特定的结构进行声明需要指出的是,在一个布局声明中,等子元素不一定全部使用,比如你可以不要侧栏菜单布局组件简化了创建可伸缩页面的过程。 一、布局/Layout MDL的布局/Layout组件用来作为整个页面其他元素的容器,可以自动适应不同的浏览器、 屏幕尺寸和设备。 showImg(https://segmentfault.com/img/bVpJGi); 布局/Layou...

    wanglu1209 评论0 收藏0
  • 认识一下 Material Design Lite 布局组件

    摘要:布局组件需要按特定的结构进行声明需要指出的是,在一个布局声明中,等子元素不一定全部使用,比如你可以不要侧栏菜单布局组件简化了创建可伸缩页面的过程。 一、布局/Layout MDL的布局/Layout组件用来作为整个页面其他元素的容器,可以自动适应不同的浏览器、 屏幕尺寸和设备。 showImg(https://segmentfault.com/img/bVpJGi); 布局/Layou...

    sixgo 评论0 收藏0
  • 认识一下 Material Design Lite 布局组件

    摘要:布局组件需要按特定的结构进行声明需要指出的是,在一个布局声明中,等子元素不一定全部使用,比如你可以不要侧栏菜单布局组件简化了创建可伸缩页面的过程。 一、布局/Layout MDL的布局/Layout组件用来作为整个页面其他元素的容器,可以自动适应不同的浏览器、 屏幕尺寸和设备。 showImg(https://segmentfault.com/img/bVpJGi); 布局/Layou...

    MadPecker 评论0 收藏0

发表评论

0条评论

2i18ns

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<