美文网首页
PaaS GridView动态栅格布局标准

PaaS GridView动态栅格布局标准

作者: Misaki_yuyi | 来源:发表于2018-11-02 17:40 被阅读22次

    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

    相关文章

      网友评论

          本文标题:PaaS GridView动态栅格布局标准

          本文链接:https://www.haomeiwen.com/subject/rnvcxqtx.html