# 布局 - Layout

# 预览及使用方法

header
sider
content

header
content

header
sider
content

<template>
  <div class="wrapper">
    <g-layout class="layout">
      <g-header class="header">header</g-header>
      <g-layout class="layout">
        <g-sider class="sider">sider</g-sider>
        <g-content class="content">content</g-content>
      </g-layout>
      <g-footer class="footer">footer</g-footer>
    </g-layout>
    <br />
    <g-layout class="layout">
      <g-header class="header">header</g-header>
      <g-content class="content">content</g-content>
      <g-footer class="footer">footer</g-footer>
    </g-layout>
    <br />
    <g-layout class="layout">
      <g-header class="header">header</g-header>
      <g-layout class="layout">
        <g-sider class="sider">sider</g-sider>
        <g-layout class="layout">
          <g-content class="content">content</g-content>
          <g-footer class="footer">footer</g-footer>
        </g-layout>
      </g-layout>
    </g-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>
      

# 相关提示:

# 1、g-layout

布局容器,其下可嵌套 Header Sider Content FooterLayout 本身,可以放在任何父容器中。

# 2、g-header

顶部布局,其下可嵌套任何元素,只能放在 Layout 中。

# 3、g-sider

侧边栏,其下可嵌套任何元素,只能放在 Layout 中。

# 4、g-content

内容部分,其下可嵌套任何元素,只能放在 Layout 中。

底部布局,其下可嵌套任何元素,只能放在 Layout 中。