Grid名称一共六种样式,涉及横向布局和纵向布局。
命名组成
命名组成: Grid_111_X ,三大类参数,中间用下划线_分割
第一个参数
Grid 表示是Grid类视图,所有枚举值
- Grid Grid类视图
- Header 个人信息类
- Card 卡片类
- Search 搜索框
第二个参数
111分别表示3个参数,从左到右依次是否有标题、是否有导航、是否有图片。(后期假如加样式限制可以通过加位数来扩展,比如1111、11111)
所有枚举值
- 000 没有标题、没有导航、仅文字
- 001 没有标题、没有导航、文字和图片
- 100 有标题、没有导航、仅文字
- 101 有标题、没有导航、文字和图片
- 110 有标题、有导航、仅文字
- 111 有标题、有导航、文字和图片
第三个参数
数字X(X大于等于1,建议不大于4),表示一行放X个格子。
- X == 1,一行放一个格子,即纵向排列。格子内容从左到右页面元素依次是图标(如果有)、文字、箭头、下划线。
- X != 1,一行放多个格子,即横线排列。格子内容从上到下依次是图标(如果有)、文字。
可配置化参数
以下所有设置为默认值,可配置化,可动态修改
颜色:
- 标题栏的字体颜色 333333
- 内容的字体颜色 666666
- 分割线的颜色 f5f5f5
字体:
- 标题栏的字体大小 32pt;
- 内容的字体大小 30pt
高度(宽度标准750)
- 标题视图高度70pt
- 内容栏视图高度(单行高度)
1 纵向排列 一行放一个 默认100pt
2 横向排列 有图片 默认160pt
3 横向排列 没有图片 默认80pt
图片示例





网友评论