布局容器

说明

Container容器使用了flex布局，默认排列方向为column，当子组件有yv-aside时，排列方向为row。

yv-container：外层容器，用来包裹下面陈列的组件；

yv-header：头部组件；

yv-aside：侧边栏组件；

yv-main：主要区域组件；

yv-footer：底部组件。

常见页面布局

代码

查看源码

<yv-container>
  <yv-header>header</yv-header>
  <yv-main>main</yv-main>
  <yv-footer>footer</yv-footer>
</yv-container>

<yv-container class="mt-10">
  <yv-header>header</yv-header>
  <yv-container>
    <yv-aside>aside</yv-aside>
    <yv-main>main</yv-main>
  </yv-container>
  <yv-footer>footer</yv-footer>
</yv-container>

<yv-container class="mt-10">
  <yv-header>header</yv-header>
  <yv-container>
    <yv-aside>aside</yv-aside>
    <yv-container>
      <yv-main class="inline-main">main</yv-main>
      <yv-footer>footer</yv-footer>
    </yv-container>
  </yv-container>
</yv-container>

<yv-container class="mt-10">
  <yv-aside>aside</yv-aside>
  <yv-container>
    <yv-header>header</yv-header>
    <yv-main class="all-inline-main">main</yv-main>
    <yv-footer>footer</yv-footer>
  </yv-container>
</yv-container>

<style scoped lang="scss">
.mt-10 {
  margin-top: 10px;
}
.yv-header, .yv-footer {
  background-color: #b3c0d1;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.yv-main {
  background-color: #e9eef3;
  height: 200px;
  line-height: 200px;
  text-align: center;
  &.inline-main {
    height: 150px;
    line-height: 150px;
  }
  &.all-inline-main {
    height: 100px;
    line-height: 100px;
  }
}
.yv-aside {
  background-color: #d3dce6;
  width: 120px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
</style>

Attributes

无attributes设置，容器样式等根据需要自行设置。