Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

<v-container>：外层容器。

<v-header>：顶栏容器。

<v-aside>：侧边栏容器。

<v-main>：主要区域容器。

<v-footer>：底栏容器。

常见页面布局

Header

Main

<template>
  <div class="layout">
    <v-container vertical>
      <v-header>Header</v-header>
      <v-main>Main</v-main>
    </v-container>
  </div>
</template>
<style scoped lang="scss">
.layout {
  .v-header,
  .v-main {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .v-header {
    background-color: var(--v-color-primary-light-7);
    color: var(--v-text-color-primary);
    text-align: center;
  }

  .v-main {
    background-color: var(--v-color-primary-light-9);
    color: var(--v-text-color-primary);
    text-align: center;
    height: 150px;
  }
}
</style>

Header

Main

<template>
  <div class="layout">
    <v-container vertical>
      <v-header>Header</v-header>
      <v-main>Main</v-main>
      <v-footer>Footer</v-footer>
    </v-container>
  </div>
</template>
<style scoped lang="scss">
.layout {
  .v-header,
  .v-footer,
  .v-main {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .v-header,
  .v-footer {
    background-color: var(--v-color-primary-light-7);
    color: var(--v-text-color-primary);
    text-align: center;
  }

  .v-main {
    background-color: var(--v-color-primary-light-9);
    color: var(--v-text-color-primary);
    text-align: center;
    height: 150px;
  }
}
</style>

Main

<template>
  <div class="layout">
    <v-container>
      <v-aside width="200px">Aside</v-aside>
      <v-main>Main</v-main>
      <v-aside width="200px">Aside</v-aside>
    </v-container>
  </div>
</template>
<style scoped lang="scss">
.layout {
  .v-main,
  .v-aside {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .v-main {
    background-color: var(--v-color-primary-light-9);
    color: var(--v-text-color-primary);
    text-align: center;
    height: 150px;
  }

  .v-aside {
    background-color: var(--v-color-primary-light-8);
    color: var(--v-text-color-primary);
    text-align: center;
  }
}
</style>

Header

Main

<template>
  <div class="layout">
    <v-container vertical>
      <v-header>Header</v-header>
      <v-container>
        <v-aside width="200px">Aside</v-aside>
        <v-main>Main</v-main>
      </v-container>
    </v-container>
  </div>
</template>
<style scoped lang="scss">
.layout {
  .v-main,
  .v-aside,
  .v-header {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .v-main {
    background-color: var(--v-color-primary-light-9);
    color: var(--v-text-color-primary);
    text-align: center;
    height: 150px;
  }

  .v-aside {
    background-color: var(--v-color-primary-light-8);
    color: var(--v-text-color-primary);
    text-align: center;
  }

  .v-header {
    background-color: var(--v-color-primary-light-7);
    color: var(--v-text-color-primary);
    text-align: center;
  }
}
</style>

Header

Main

<template>
  <div class="layout">
    <v-container vertical>
      <v-header>Header</v-header>
      <v-container>
        <v-aside width="200px">Aside</v-aside>
        <v-container vertical>
          <v-main>Main</v-main>
          <v-footer>Footer</v-footer>
        </v-container>
      </v-container>
    </v-container>
  </div>
</template>
<style scoped lang="scss">
.layout {
  .v-main,
  .v-aside,
  .v-header,
  .v-footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .v-main {
    background-color: var(--v-color-primary-light-9);
    color: var(--v-text-color-primary);
    text-align: center;
    height: 150px;
  }

  .v-aside {
    background-color: var(--v-color-primary-light-8);
    color: var(--v-text-color-primary);
    text-align: center;
  }

  .v-header,
  .v-footer {
    background-color: var(--v-color-primary-light-7);
    color: var(--v-text-color-primary);
    text-align: center;
  }
}
</style>

Header

Main

<template>
  <div class="layout">
    <v-container>
      <v-aside width="200px">Aside</v-aside>
      <v-container vertical>
        <v-header>Header</v-header>
        <v-main>Main</v-main>
      </v-container>
    </v-container>
  </div>
</template>
<style scoped lang="scss">
.layout {
  .v-main,
  .v-aside,
  .v-header {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .v-main {
    background-color: var(--v-color-primary-light-9);
    color: var(--v-text-color-primary);
    text-align: center;
    height: 150px;
  }

  .v-aside {
    background-color: var(--v-color-primary-light-8);
    color: var(--v-text-color-primary);
    text-align: center;
  }

  .v-header {
    background-color: var(--v-color-primary-light-7);
    color: var(--v-text-color-primary);
    text-align: center;
  }
}
</style>

Header

Main

<template>
  <div class="layout">
    <v-container>
      <v-aside width="200px">Aside</v-aside>
      <v-container vertical>
        <v-header>Header</v-header>
        <v-main>Main</v-main>
        <v-footer>Main</v-footer>
      </v-container>
    </v-container>
  </div>
</template>
<style scoped lang="scss">
.layout {
  .v-main,
  .v-aside,
  .v-header,
  .v-footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .v-main {
    background-color: var(--v-color-primary-light-9);
    color: var(--v-text-color-primary);
    text-align: center;
    height: 150px;
  }

  .v-aside {
    background-color: var(--v-color-primary-light-8);
    color: var(--v-text-color-primary);
    text-align: center;
  }

  .v-header,
  .v-footer {
    background-color: var(--v-color-primary-light-7);
    color: var(--v-text-color-primary);
    text-align: center;
  }
}
</style>

Container Attributes

属性名	说明	类型	默认值
vertical	是否垂直排列	`boolean`	false

Container Slots

插槽名	说明	子标签
default	自定义默认内容	Container / Header / Aside / Main / Footer

Header Attributes

属性名	说明	类型	默认值
height	顶栏高度	`string`	60px

Header Slots

插槽名	说明
default	自定义默认内容

Aside Attributes

属性名	说明	类型	默认值
width	侧边栏宽度	`string`	300px

Aside Slots

插槽名	说明
default	自定义默认内容

Main Slots

插槽名	说明
default	自定义默认内容

属性名	说明	类型	默认值
height	底栏高度	`string`	60px

插槽名	说明
default	自定义默认内容

Container 布局容器

常见页面布局

Container Attributes

Container Slots

Header Attributes

Header Slots

Aside Attributes

Aside Slots

Main Slots

Footer Attributes

Footer Slots

Container 布局容器 ​

常见页面布局 ​

Container Attributes ​

Container Slots ​

Header Attributes ​

Header Slots ​

Aside Attributes ​

Aside Slots ​

Main Slots ​

Footer Attributes ​

Footer Slots ​

Container 布局容器

常见页面布局

Container Attributes

Container Slots

Header Attributes

Header Slots

Aside Attributes

Aside Slots

Main Slots

Footer Attributes

Footer Slots