原理
el-container、el-header、el-aside和el-footer是Element UI框架中的布局组件,有着以下关系:
- el-container:容器组件,是整个布局的最外层容器,包含了页面的整体布局。
- el-header:头部组件,位于容器组件的顶部,通常用于放置导航栏、logo等。
- el-aside:侧边栏组件,放置在容器组件的左侧或右侧,用于放置边栏菜单、快捷导航等。
- el-footer:底部组件,位于容器组件的底部,通常用于放置页脚信息、版权声明等。
组件之间的关系是嵌套关系,即el-container包含el-header、el-aside和el-footer。通过这些组件的组合使用,可以实现各种不同的网页布局。
1. 顶部导航布局:
<template>
<el-container style="height: 500px;">
<el-header>顶部导航栏</el-header>
<el-main>Main 内容</el-main>
</el-container>
</template>
2. 侧边栏布局:
如,可以将el-header放置在el-container的顶部,el-aside放置在左侧,el-footer放置在底部,以创建一个带有头部、侧边栏和底部的整体布局。
<template>
<el-container style="height: 500px;">
<el-aside width="200px" style="background-color: #65c0ba;">侧边栏</el-aside>
<el-main>Main 内容</el-main>
</el-container>
</template>
注意:侧边栏的下面和右边全都是main,填充了侧边栏就正常展开了。
3. 顶部导航 + 侧边栏布局:
<template>
<el-container style="height: 500px;">
<el-header style="background-color: #f0f0f0;">顶部导航栏</el-header>
<el-container>
<el-aside width="200px" style="background-color: #f8f8f8;">侧边栏</el-aside>
<el-main>Main 内容</el-main>
</el-container>
</el-container>
</template>
4.顶部导航 + 侧边栏 + 底部布局:
<template>
<div>
<el-container style="height: 500px;">
<el-header class="header">头部</el-header>
<el-container>
<el-aside class="sidebar" width="200px">侧边栏</el-aside>
<el-main>Main 内容</el-main>
</el-container>
<el-footer class="footer">底部</el-footer>
</el-container>
</div>
</template>
<script>
export default {
name: 'LayoutExample'
};
</script>
<style>
.header {
background-color: red;
}
.sidebar {
background-color: yellow;
}
.footer {
background-color: blue;
}
</style>
运行成功图:
5. 网格布局:
这个布局使用了网格布局,包含了两个固定宽度的侧边栏、一个自适应宽度的内容区域和一个固定底部。
<template>
<el-container style="height: 500px;">
<el-aside width="150px" style="background-color: #ff7676;">侧边栏</el-aside>
<el-main style="background-color: #ffd700;">内容</el-main>
<el-aside width="150px" style="background-color: #65c0ba;">侧边栏</el-aside>
<el-footer style="background-color: #ffbb54;">底部</el-footer>
</el-container>
</template>
6. 多列布局:
这个布局使用了多个相同宽度的侧边栏和内容区域,使得页面呈现多列的效果。
<template>
<el-container style="height: 500px;">
<el-aside width="200px" style="background-color: #65c0ba;">侧边栏</el-aside>
<el-main>内容区域</el-main>
<el-aside width="200px" style="background-color: #ffbb54;">侧边栏</el-aside>
<el-main>内容区域</el-main>
<el-aside width="200px" style="background-color: #ff7676;">侧边栏</el-aside>
</el-container>
</template>
如果你觉得我的文章对你有帮助,能否给我点个赞,关注我呢?你们的支持将是我持续创作的动力,也是我进一步提升的动力。希望我们能够在这个技术的海洋中一起成长,共同探索更多惊喜和可能性。谢谢大家!期待你们的关注和赞同!👍❤️