快速建立容器

容器可以支持配置所有的组件,并且支持24个栅格的栅格模式,按照你的页面布局随心布置
更多页面详情请查看容器示例,包含列表,表单和其他组件配置示例

效果预览

容器主体yml配置

wau_body:
  body:
    grid:
      - model: row
        cols:
          - model: col
            content:
              # 组件内容,可以放多个组件
              - model: 'notice_block'
                need_close: 'false'
                message: '您有权限'
      - model: row
        gutter: 40
        cols:
          - model: col
            span: 16
            content:
              # 组件内容
          - model: col
            span: 8
            content:
              # 组件内容

row字段说明

字段 类型 含义 默认值
gutter Number 栅格间距,单位 px,左右平分 0
type String 布局模式,可选值为flex或不选,在现代浏览器下有效 -
align String flex 布局下的垂直对齐方式,可选值为top、middle、bottom -
justify String flex 布局下的水平排列方式,可选值为start、end、center、space-around、space-between -
class_name String 自定义的class名称 -

col字段说明

字段 类型 含义 默认值
span Number 栅格的占位格数,可选值为0~24的整数,为 0 时,相当于display:none -
order Number 栅格的顺序,在flex布局模式下有效 -
offset Number 栅格左侧的间隔格数,间隔内不可以有栅格 -
push Number 栅格向右移动格数 -
pull Number 栅格向左移动格数 -
class_name String 自定义的class名称 -
xs Number or Object <768px 响应式栅格,可为栅格数或一个包含其他属性的对象 -
sm Number or Object ≥768px 响应式栅格,可为栅格数或一个包含其他属性的对象 -
md Number or Object ≥992px 响应式栅格,可为栅格数或一个包含其他属性的对象 -
lg Number or Object ≥1200px 响应式栅格,可为栅格数或一个包含其他属性的对象 -

results matching ""

    No results matching ""