Row Col 分栏

基础用法

一行两列

{
  id: '',
  componentName: 'Row',
  componentType: 'layout',
  attrs: {},
  children: [
    {
      id: '',
      componentName: 'Col',
      componentType: 'layout',
      attrs: {
        span: 12
      },
      children: [],
      style: {},
    },
    {
      id: '',
      componentName: 'Col',
      componentType: 'layout',
      attrs: {
        span: 12
      },
      children: [],
      style: {},
    }
  ],
}

列偏移

{
  id: '',
  componentName: 'Row',
  componentType: 'layout',
  attrs: {},
  children: [
    {
      id: '',
      componentName: 'Col',
      componentType: 'layout',
      attrs: {
        span: 6,

      },
      children: [],
      style: {},
    },
    {
      id: '',
      componentName: 'Col',
      componentType: 'layout',
      attrs: {
        span: 6,
        offset: 6,
      },
      children: [],
      style: {},
    }
  ],
  ...
}

列间距

{
  id: '',
  componentName: 'Row',
  componentType: 'layout',
  attrs: {
    gutter: 20,
  },
  ...
}

列对齐方式

{
  id: '',
  componentName: 'Row',
  componentType: 'layout',
  attrs: {
    justify: 'center', //'center'|'end'|'space-between'|'space-around'|'space-evenly'
  },
  ...
}

响应式布局

{
  id: '',
  componentName: 'Row',
  componentType: 'layout',
  attrs: {},
  children: [
    {
      id: '',
      componentName: 'Col',
      componentType: 'layout',
      attrs: {
        span: 6,
        xs: 8,  
        sm: 6,  
        md: 4,  
        lg: 3,  
        xl: 1,  
      },
      children: [],
      style: {},
    },
    {
      id: '',
      componentName: 'Col',
      componentType: 'layout',
      attrs: {
        span: 6,
      },
      children: [],
      style: {},
    }
  ],
  ...
}