002_Container布局容器

1. Container布局容器

1.1. Container布局容器是用于布局的容器组件, 方便快速搭建页面的基本结构。

1.2. <el-container>外层容器。当子元素中包含<el-header>或<el-footer>时, 全部子元素会垂直上下排列, 否则会水平左右排列。

1.3. <el-header>顶栏容器。

1.4. <el-aside>侧边栏容器。

1.5. <el-main>主要区域容器。

1.6. <el-footer>底栏容器。

1.7. Container布局容器的组件采用了flex布局, 使用前请确定目标浏览器是否兼容。此外, <el-container>的子元素只能是后四者, 后四者的父元素也只能是<el-container>。

1.8. Container属性

参数	说明	类型	可选值	默认值
direction	子元素的排列方向	string	horizontal / vertical	子元素中有el-header或el-footer时为vertical, 否则为horizontal

1.9. Header属性

参数	说明	类型	默认值
height	顶栏高度	string	60px

1.10. Aside属性

参数	说明	类型	默认值
width	侧边栏宽度	string	300px

1.11. Footer属性

参数	说明	类型	默认值
height	底栏高度	string	60px

2. Container布局容器例子

2.1. 使用脚手架新建一个名为element-ui-container的前端项目, 同时安装Element插件。

2.2. 编写App.vue

<template><div id="app"><router-view></router-view></div>
</template><script>
export default {name: 'app'
}
</script><style>
#app {width: 80%;margin: 0 auto;
}
.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;
}
</style>

2.3. 编写index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HeaderMainContainer from '../components/HeaderMainContainer.vue'
import HeaderMainFooterContainer from '../components/HeaderMainFooterContainer.vue'
import AsideMainContainer from '../components/AsideMainContainer.vue'
import HeaderAsideMainContainer from '../components/HeaderAsideMainContainer.vue'
import HeaderAsideMainFooterContainer from '../components/HeaderAsideMainFooterContainer.vue'
import AsideHeaderMainContainer from '../components/AsideHeaderMainContainer.vue'
import AsideHeaderMainFooterContainer from '../components/AsideHeaderMainFooterContainer.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/HeaderMainContainer' },{ path: '/HeaderMainContainer', component: HeaderMainContainer },{ path: '/HeaderMainFooterContainer', component: HeaderMainFooterContainer },{ path: '/AsideMainContainer', component: AsideMainContainer },{ path: '/HeaderAsideMainContainer', component: HeaderAsideMainContainer },{ path: '/HeaderAsideMainFooterContainer', component: HeaderAsideMainFooterContainer },{ path: '/AsideHeaderMainContainer', component: AsideHeaderMainContainer },{ path: '/AsideHeaderMainFooterContainer', component: AsideHeaderMainFooterContainer }
]const router = new VueRouter({routes
})export default router

2.4. 在components下创建HeaderMainContainer.vue

<template><div><h1>顶栏和主要区域容器</h1><el-container><el-header>Header</el-header><el-main>Main</el-main></el-container></div>
</template>

2.5. 在components下创建HeaderMainFooterContainer.vue

<template><div><h1>顶栏、主要区域和底栏容器</h1><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></div>
</template>

2.6. 在components下创建AsideMainContainer.vue

<template><div><h1>侧边栏和主要区域容器</h1><el-container><el-aside>Aside</el-aside><el-main>Main</el-main></el-container></div>
</template>

2.7. 在components下创建HeaderAsideMainContainer.vue

<template><div><h1>顶栏、侧边栏和主要区域容器</h1><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></div>
</template>

2.8. 在components下创建HeaderAsideMainFooterContainer.vue

<template><div><h1>顶栏、侧边栏、主要区域和底栏容器</h1><el-container><el-header>Header</el-header><el-container><el-aside>Aside</el-aside><el-container><el-main>Main</el-main><el-footer height="200px">Footer</el-footer></el-container></el-container></el-container></div>
</template>

2.9. 在components下创建AsideHeaderMainContainer.vue

<template><div><h1>侧边栏、顶栏和主要区域容器</h1><el-container><el-aside>Aside</el-aside><el-container><el-header height="200px">Header</el-header><el-main>Main</el-main></el-container></el-container></div>
</template>

2.10. 在components下创建AsideHeaderMainFooterContainer.vue

<template><div><h1>侧边栏、顶栏、主要区域和底栏容器</h1><el-container><el-aside>Aside</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container></div>
</template>

2.11. 运行项目, 访问http://localhost:8080/#/HeaderMainContainer

2.12. 运行项目, 访问http://localhost:8080/#/HeaderMainFooterContainer

2.13. 运行项目, 访问http://localhost:8080/#/AsideMainContainer

2.14. 运行项目, 访问http://localhost:8080/#/HeaderAsideMainContainer

2.15. 运行项目, 访问http://localhost:8080/#/HeaderAsideMainFooterContainer

2.16. 运行项目, 访问http://localhost:8080/#/AsideHeaderMainContainer

2.17. 运行项目, 访问http://localhost:8080/#/AsideHeaderMainFooterContainer

002_Container布局容器相关推荐

WPF-常用布局容器
名称描述 StackPanel 在水平或垂直的堆栈中放置元素,通常应用于一个复杂的布局中的一小块区域 WrapPanel 在一系列可换行(列)的行中放置元素,支持水平.垂直方向,一行(列)放不下自动 ...
WPF 10天修炼第四天- WPF布局容器
WPF布局 WPF的窗口也就是Window类,是一个内容控件,该控件派生自ContentControl.内容控件有一个Content属性,该属性有一个限制,只能放置一个用户界面元素,或一个字符串.为了 ...
ElementUI Container布局容器
ElementUI介绍常用组件 container布局容器
jQuery EasyUI布局容器layout实例精讲
这个布局容器,有五个区域:北.南.东.西和中心. 他中心地区面板是必需的,但是边缘地区面板是可选的.每一个边缘地区面板可以缩放的拖动其边境, 他们也可以通过点击其收缩触发.布局可以嵌套,从而用户可以建 ...
Element UI——布局容器el-container子元素强制上下排列
问题描述 <el-container><content-header></content-header><dashboard-content></ ...
Android 在布局容器中动态添加控件
这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...
C# WPF：初识布局容器
StackPanel堆叠布局 StackPanel是简单布局方式之一,可以很方便的进行纵向布局和横向布局 StackPanel默认是纵向布局的 <Window x:Class="Wpf ...
使用container的嵌套_ElementUI 技术揭秘（4）— Container 布局容器组件的设计与实现。...
前言上一篇文章我们分析了 Layout 布局组件的设计和实现,它的应用场景通常是局部布局.对于整个页面的布局,element-ui 提供了 Container 布局容器组件,专门用于 PC 管理后台 ...
react 布局容器_如何使用容器模式开发React超能力
react 布局容器 Hello everyone! ? 大家好! ? This time I'm going to tell you about this very useful pattern i ...

002_Container布局容器

002_Container布局容器相关推荐

最新文章

热门文章