Container 布局容器
Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构：
<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，<el-container> 的子元素只能是后四者，后四者的父元素也只能是 <el-container>。
¶常见页面布局
<el-container><el-header>Header</el-header> <el-main>Main</el-main> </el-container> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> <el-footer>Footer</el-footer> </el-container> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-main>Main</el-main> </el-container> </el-container> <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-main>Main</el-main> <el-footer>Footer</el-footer> </el-container> </el-container> </el-container> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> </el-container> </el-container> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-header>Header</el-header> <el-main>Main</el-main> <el-footer>Footer</el-footer> </el-container> </el-container> <style> .el-header, .el-footer { background-color: #B3C0D1; color: #333; text-align: center; line-height: 60px; } .el-aside { background-color: #D3DCE6; color: #333; text-align: center; line-height: 200px; } .el-main { background-color: #E9EEF3; color: #333; text-align: center; line-height: 160px; } body > .el-container { margin-bottom: 40px; } .el-container:nth-child(5) .el-aside, .el-container:nth-child(6) .el-aside { line-height: 260px; } .el-container:nth-child(7) .el-aside { line-height: 320px; } </style> ¶实例
<el-container style="height: 500px; border: 1px solid #eee"><el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu :default-openeds="['1', '3']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>导航一</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="1-1">选项1</el-menu-item> <el-menu-item index="1-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="1-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="1-4"> <template slot="title">选项4</template> <el-menu-item index="1-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>导航二</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="2-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-setting"></i>导航三</template> <el-menu-item-group> <template slot="title">分组一</template> <el-menu-item index="3-1">选项1</el-menu-item> <el-menu-item index="3-2">选项2</el-menu-item> </el-menu-item-group> <el-menu-item-group title="分组2"> <el-menu-item index="3-3">选项3</el-menu-item> </el-menu-item-group> <el-submenu index="3-4"> <template slot="title">选项4</template> <el-menu-item index="3-4-1">选项4-1</el-menu-item> </el-submenu> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style=转载于:https://www.cnblogs.com/grt322/p/8531882.html
Container 布局容器相关推荐
- ElementUI Container布局容器
ElementUI介绍 常用组件 container布局容器
- 使用container的嵌套_ElementUI 技术揭秘（4）— Container 布局容器组件的设计与实现。...
前言 上一篇文章我们分析了 Layout 布局组件的设计和实现,它的应用场景通常是局部布局.对于整个页面的布局,element-ui 提供了 Container 布局容器组件,专门用于 PC 管理后台 ...
- 使用element-ui中的container布局容器
使用container布局容器,最常用的是第六个(自己官网看第六个什么样) 可能有人调整aside的高,始终不能充满屏幕,接下来我说一下我通常用的 1.在App.vue中,style里写: #app ...
- 让Element-ui的Container布局容器高度百分百显示
使用Element(2.13.1版本)的Container布局容器布局,按照官网的代码运行后不能撑开整个页面,只能显示一段高度,代码如下: <el-container><el-hea ...
- Element的Container布局容器布满全屏
摘要:在使用Element(2.10.1版本)的Container布局容器布,发现按照官网的代码运行后,发现不能撑开整个页面,只能显示一段高度 官方代码运行后效果: 如何实现不满全屏呢?实现如下: ...
- element布局容器大小_让Element-ui的Container布局容器高度百分百显示
使用Element(2.13.1版本)的Container布局容器布局,按照官网的代码运行后不能撑开整个页面,只能显示一段高度,代码如下: Header left Main 那如何让它高度百分百显示呢 ...
- Container布局容器
Container布局容器 用于布局的容器组件,方便快速搭建页面的基本结构: <el-container>:外层容器.当子元素中包含<el-header>或<el-foo ...
- 使ElementUI的Container布局容器布满全屏
问题:引用官网例子,布局只占一半,定义固定像素高度又不好适用不同屏幕大小效果. 解决方案: 1.在app.vue中加以下样式 <style>#app {position: absolute ...
- ElementUI 布局容器Container
目录 官方地址 布局容器组件 常见布局 测试用的CSS样式 常见布局1 常见布局2 常见布局3 常见布局3 常见布局4 常见布局5 常见布局6 实例 template style js el-cont ...
最新文章
- c#链接操作mysql数据库代码_c#连接mysql数据库 代码
- 研发团队资源成本优化实践
- Cocos2d-x 常见宏
- 【采用】信用评分卡模型-数据缺失值处理
- Kali渗透测试技术实战
- Redis 数据类型与操作命令整理
- 使用Eclipse-Maven-git做Java开发(3)--Eclipse的安装和配
- POJ2513Colored Sticks
- (转)如何诊断和解决CPU高度消耗(100%)的数据库问题
- Pandownload 百度网盘光速下载 十分简单 一秒破解
- 考研日语线上笔记（七）：十年真题完型精翻篇（2012-2021年）
- 玩头条整整20天了，发的内容只有头条，已有差不多250元的收益了
- windowsXP源代码下载磁力链接，仅做保存！
- 程序人生：如何成为一名优秀的全栈工程师
- 台式u盘显示计算机未响应怎么办,u盘插上去电脑没反应怎么办_u盘插上后无任何反应的解决教程－系统城...
- STM32F4+DP83848以太网通信指南系列（一）：知识储备
- 小程序(原生) 引入weUI组件
- Kcauldron服务端linux版,[1.7.10][KCauldron]FAN幻议会——工业|神秘|应用能源|热力|娱乐模式|龙之研究|无.......
- CVTE校招面经(已拿offer)
- Android悬浮窗初探声音处理相关总结