PaaS GridView动态栅格布局标准

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

图片示例

Grid_000_3.png
Grid_101_1.png
Grid_101_4.png
Grid_110_1.png
Grid_111_3.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容