# 布局 - 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
Footer
或 Layout
本身,可以放在任何父容器中。
# 2、g-header
顶部布局,其下可嵌套任何元素,只能放在 Layout
中。
# 3、g-sider
侧边栏,其下可嵌套任何元素,只能放在 Layout
中。
# 4、g-content
内容部分,其下可嵌套任何元素,只能放在 Layout
中。
# 5、g-footer
底部布局,其下可嵌套任何元素,只能放在 Layout
中。