Element UI学习记录之布局

目录

Element UI学习记录之布局

一、Layout布局

二、Container布局容器

---

Element UI学习记录之布局

一、Layout布局

基本概念：一行通过分割为24栅格栏进行布局，如果要占满一行如下:

<!--el-row 表示一行-->
<!--el-col 表示一列-->
<el-row>
    <el-col :span="24">
        24
     </el-col>
</el-row>

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。并且可以在<style></style>标签中设置CSS样式。以下为LayoutView.vue代码：

<template>
  <div class="layout">
    <!--el-row 表示一行-->
    <!--el-col 表示一列-->
    <el-row>
      <el-col :span="24">
        24
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">16</el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="6">24</el-col>
      <el-col :span="6">24</el-col>
      <el-col :span="6">24</el-col>
    </el-row>
    <el-row type="flex" justify="start">
      <el-col :span="6">24</el-col>
      <el-col :span="6">24</el-col>
      <el-col :span="6">24</el-col>
    </el-row>
  </div>

</template>

<script>
export default {
  name: "LayoutView"
}
</script>

<style scoped>
  .el-row{
    background-color: #42b983;
    margin: 20px;
  }
  .el-col{
    background-color: #2c3e50;
    color: white;
    padding: 10px;
    border-right: 1px solid white;
  }
</style>

展示结果如下：

 还可以通过flex布局来对分栏进行灵活的对齐。将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。

---

二、Container布局容器

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

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

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

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

<el-footer>：底栏容器。

下面分享一个简单的例子ContainerView.vue：

<template>
<div class="container">
  <el-container>
    <el-header>header</el-header>
    <el-container>
      <el-aside>aside</el-aside>
      <el-main>main</el-main>
    </el-container>

    <el-footer>footer</el-footer>
  </el-container>
</div>
</template>

<script>
export default {
  name: "ContainerView"
}
</script>

<style scoped>
.el-container{
  background-color: #eee;
  color: white;
}
.el-header{
  background-color: #2c3e50;
  height: 400px;
}
.el-footer{
  background-color: #42b983;
}
.el-aside{
  background-color: sienna;
  max-width: 200px;
  min-height: 350px;
}
.el-main{
  background-color: purple;
  min-height: 350px;
}
</style>

展示效果如下：