# 布局组件

使用方法
属性列表
示例应用 Demo Combo

# 使用方法

# 三栏布局

点击查看代码

<vue-main style="height: 20vh;">
  <vue-aside class="demo" :width="200">Aside</vue-aside>
  <vue-container class="demo">
    <vue-header class="demo">Header</vue-header>
    <vue-container class="demo">Content</vue-container>
    <vue-footer class="demo">Footer</vue-footer>
  </vue-container>
</vue-main>

1
2
3
4
5
6
7
8

# 三栏布局中栏左侧菜单栏

点击查看代码

<vue-main style="height: 20vh;">
  <vue-header class="demo">Header</vue-header>
  <vue-container class="demo">
    <vue-aside class="demo" :width="50">Aside</vue-aside>
    <vue-container>Content</vue-container>
  </vue-container>
  <vue-footer class="demo">Footer</vue-footer>
</vue-main>

1
2
3
4
5
6
7
8

# 三栏布局中栏右侧菜单栏

点击查看代码

<vue-main style="height: 20vh;">
  <vue-header class="demo">Header</vue-header>
  <vue-container class="demo">
    <vue-aside class="demo" :width="50">Aside</vue-aside>
    <vue-container>Content</vue-container>
  </vue-container>
  <vue-footer class="demo">Footer</vue-footer>
</vue-main>```

1
2
3
4
5
6
7
8

# 左右两栏布局左侧菜单栏

点击查看代码

<vue-main style="height: 20vh;">
  <vue-aside class="demo" :width="200">Aside</vue-aside>
  <vue-container class="demo">
    <vue-header class="demo">Header</vue-header>
    <vue-container class="demo">Content</vue-container>
    <vue-footer class="demo">Footer</vue-footer>
  </vue-container>
</vue-main>

1
2
3
4
5
6
7
8

# 属性列表

VueMain.vue

参数	说明	类型	可选值	默认值
无	-	-	-	-

VueContainer.vue

参数	说明	类型	可选值	默认值
width	宽度	number	-	100

VueHeader.vue

参数	说明	类型	可选值	默认值
height	高度	number	-	40

VueFooter.vue

参数	说明	类型	可选值	默认值
height	高度	number	-	40

VueAside.vue

参数	说明	类型	可选值	默认值
width	宽度	number	-	100

# 示例应用 Demo Combo

← Grid Tab →

# 布局组件

# 使用方法

# 三栏布局

# 三栏布局 中栏 左侧菜单栏

# 三栏布局 中栏 右侧菜单栏

# 左右两栏布局 左侧菜单栏

# 属性列表

# 示例应用 Demo Combo

# 三栏布局中栏左侧菜单栏

# 三栏布局中栏右侧菜单栏

# 左右两栏布局左侧菜单栏