布局

预览

使用方法

<template>
  <div class="wrapper">
    <zh-layout>
      <zh-header> header </zh-header>
      <zh-layout>
        <zh-sider> sider </zh-sider>
        <zh-content> content </zh-content>
      </zh-layout>
      <zh-footer> footer </zh-footer>
    </zh-layout>
    <br>
    <zh-layout>
      <zh-header> header </zh-header>
      <zh-content> content </zh-content>
      <zh-footer> footer </zh-footer>
    </zh-layout>
    <br>
    <zh-layout>
      <zh-header> header </zh-header>
      <zh-layout>
        <zh-sider> sider </zh-sider>
        <zh-layout>
          <zh-content> content </zh-content>
          <zh-footer> footer </zh-footer>
        </zh-layout>
      </zh-layout>
    </zh-layout>
  </div>
</template>
<style lang="scss" scoped>
$background: #3eaf7c;
.wrapper {
> .layout { height: 30vh;
  > .header { height: 3em; background: $background; }
  > .content { background: lighten($background, 40%); }
  > .layout { height: 6em;
    > .sider { width: 3em; background: lighten($background, 15%); }
    > .content { background: lighten($background, 40%); }
    > .layout{
      > .content{ background: lighten($background, 40%); }
      > .footer { background: $background; }
    }
  }
  > .footer { background: $background; }
}
}
</style>

选项

提供基础布局，样式自定义。

组件概述

• zh-layout ：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。

• zh-header ：顶部布局，其下可嵌套任何元素，只能放在 Layout 中。

• zh-sider ：侧边栏，其下可嵌套任何元素，只能放在 Layout 中。

• zh-content ：内容部分，其下可嵌套任何元素，只能放在 Layout 中。

• zh-footer ：底部布局，其下可嵌套任何元素，只能放在 Layout 中。