Skip to content

布局

基础用法

[
  {
    name: "text",
    text: "配置1"
  },
  {
    name: "text2",
    text: "配置2"
  },
  {
    name: "text3",
    text: "配置3"
  }
]
显示配置

行内布局

可以通过配置span,来指定行内的配置项占用多少位置,一行为24,例如一行要显示三个配置则 span 可以配置 8;四个则为 6。默认会自动调节在一行中显示。

[
  {
    type: "row",
    labelWidth: "100px",
    span: 8,
    items: [
      {
        name: "text",
        text: "配置1"
      },
      {
        name: "text2",
        text: "配置2"
      },
      {
        name: "text3",
        text: "配置3"
      }
    ]
  },
  {
    type: "row",
    span: 12,
    labelWidth: "100px",
    items: [
      {
        name: "text4",
        text: "配置1"
      },
      {
        name: "text5",
        text: "配置2"
      },
      {
        name: "text6",
        text: "配置3"
      }
    ]
  }
]
显示配置

混合布局

[
  {
    name: "text0",
    labelWidth: "100px",
    text: "配置0"
  },
  {
    type: "row",
    labelWidth: "100px",
    items: [
      {
        name: "text",
        text: "配置1"
      },
      {
        name: "text2",
        text: "配置2"
      },
      {
        name: "text3",
        text: "配置3"
      }
    ]
  }
]
显示配置

对象容器

Object

[
  {
    name: "data",
    items: [
      {
        name: "text2",
        text: "配置2"
      },
      {
        name: "text3",
        text: "配置3"
      }
    ]
  }
]
显示配置

fieldset

[
  {
    type: "fieldset",
    labelWidth: "100px",
    legend: "fieldset",
    items: [
      {
        name: "text",
        text: "配置1"
      },
      {
        type: "row",
        items: [
          {
            name: "text2",
            text: "配置2"
          },
          {
            name: "text3",
            text: "配置3"
          }
        ]
      }
    ]
  }
]
显示配置

panel

[
  {
    type: "panel",
    title: "panel",
    items: [
      {
        name: "text",
        text: "配置1"
      },
      {
        type: "row",
        items: [
          {
            name: "text2",
            text: "配置2"
          },
          {
            name: "text3",
            text: "配置3"
          }
        ]
      }
    ]
  }
]
显示配置

tabs

[
  {
    type: "tab",
    items: [
      {
        title: "tab1",
        items: [
          {
            name: "text",
            text: "配置1"
          }
        ]
      },
      {
        title: "tab2",
        items: [
          {
            name: "text2",
            text: "配置2"
          },
          {
            name: "text3",
            text: "配置3"
          }
        ]
      }
    ]
  }
]
显示配置

数组容器

groupList

[
  {
    type: "groupList",
    name: "group",
    items: [
      {
        name: "text",
        text: "配置1"
      },
      {
        type: "row",
        items: [
          {
            name: "text2",
            text: "配置2"
          },
          {
            name: "text3",
            text: "配置3"
          }
        ]
      }
    ]
  }
]
显示配置

table

[
  {
    type: "table",
    name: "table",
    items: [
      {
        name: "text",
        label: "配置1"
      }
    ]
  }
]
显示配置

Powered by 腾讯视频会员平台技术中心