ElementUI 组件：Container 布局容器_el-container

ElementUI安装与使用指南

Container 布局容器

点击下载learnelementuispringboot项目源码

效果图

el-container.vue（Container 布局容器）页面效果图

项目里el-container.vue代码

<script>
import PagePath from "@/components/PagePath.vue";

export default {
  name: 'el_container',//布局容器
  data(){
    return{
      el_container_example: PagePath.el_container_example,
    }
  }
}

</script>
<!--
Container 布局容器
https://element.eleme.cn/#/zh-CN/component/container
-->
<template>
  <div class="el_container_root">
    <h2>Container 布局容器</h2>

    用于布局的容器组件，方便快速搭建页面的基本结构：

    <ul>
      <li>el-container：外层容器。当子元素中包含 el-header 或 el-footer 时，全部子元素会垂直上下排列，否则会水平左右排列。
      </li>
      <li>el-header：顶栏容器。</li>
      <li>el-aside：侧边栏容器。</li>
      <li>el-main：主要区域容器。</li>
      <li>el-footer：底栏容器。</li>
    </ul>
    <p>
      以上组件采用了 flex 布局，使用前请确定目标浏览器是否兼容。此外，el-container 的子元素只能是后四者，后四者的父元素也只能是
      el-container。
    </p>
    <h2>常见页面布局</h2>

    <h5>样式一</h5>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
    </el-container>

    <h5>样式二</h5>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-main>
      <el-footer>Footer</el-footer>
    </el-container>

    <h5>样式三</h5>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>

    <h5>样式四</h5>
    <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>

    <h5>样式五</h5>
    <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>

    <h5>样式六</h5>
    <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>

    <h5>样式七</h5>
    <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>

    <h2><a v-bind:href="el_container_example" target="_blank">Container 布局容器 实例</a></h2>

  </div>

</template>

<style>

.el_container_root {
  margin-left: 300px;
  margin-right: 300px;
  text-align: left;
}

.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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145

查看：ElementUI 组件：Container 布局容器实例

Container Attributes

Header Attributes

Aside Attributes

Footer Attributes

欢迎关注我的公众号，不定期推送优质的文章，
微信扫一扫下方二维码即可关注。