# 布局 | tmagic-editor
页面可视化平台

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"
          }
        ]
      }
    ]

显示配置