ElementUI 布局容器Container_element ui container-程序员宅基地

技术标签: container  Vue.js  Vue  ElementUI  布局容器  

官方地址

https://element.eleme.io/#/zh-CN/component/container

布局容器组件

布局容器组件采用flex布局

  • el-container 外层容器
    • 当子元素中包含 <el-header><el-footer> 时,全部子元素会垂直上下排列,否则会水平左右排列。
    • <el-container> 的子元素只能是后四者,后四者的父元素也只能是<el-container>
  • el-header 顶栏容器
  • el-aside 侧边栏容器
  • el-main 主体容器
  • el-footer 底栏容器

常见布局

测试用的CSS样式

 .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;
  }

常见布局1

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
</el-container>

常见布局2

<el-container>
  <el-header>Header</el-header>
  <el-main>Main</el-main>
  <el-footer>Footer</el-footer>
</el-container>

常见布局3

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-main>Main</el-main>
</el-container>

常见布局3

<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>

常见布局4

<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>

常见布局5

<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>

常见布局6

<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>

实例

template

<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="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>查看</el-dropdown-item>
          <el-dropdown-item>新增</el-dropdown-item>
          <el-dropdown-item>删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>王小虎</span>
    </el-header>
    
    <el-main>
      <el-table :data="tableData">
        <el-table-column prop="date" label="日期" width="140">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</el-container>

style

<style>
  .el-header {
    
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    
    color: #333;
  }
</style>

js

<script>
  export default {
    
    data() {
    
      const item = {
    
        date: '2018-01-01',
        name: '李某某',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
    
        tableData: Array(20).fill(item)
      }
    }
  };
</script>

el-container 属性

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

el-header 属性

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

el-footer 属性

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

el-aside 属性

参数 说明 类型 可选值 默认值
width 侧边栏宽度 string 300px
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_32617703/article/details/103120434

智能推荐

Unity | 深入了解NavMeshAgent_unity navmeshagent-程序员宅基地

文章浏览阅读3.7k次,点赞6次,收藏12次。相关API链接及概况下方是常规默认情况下 Navigation 中的 Bake(烘焙)情况,蓝色部分表示可以走。我们可以看到,Bake有以下这些属性可以设置下面我们来逐个介绍这些属性1. Agent RadiusAgent Radius 用来控制实体的区域半径/距离,影响了导航网格与游戏世界中障碍物的远近。 当把它的值设置的非常大的时候,就可以看到与障碍物的距离十分庞大。 当把它的值设置的非常小的时候,就可以看到与障碍物的距离十分狭小,以至于不仅网格和物体的边界没有了,甚_unity navmeshagent

pythontcp服务器如何关闭阻塞_python中关闭tcp套接字的正确方法-程序员宅基地

文章浏览阅读689次。当您必须向远程客户端发出不再发送数据的信号时,关机非常有用。您可以在shutdown()参数中指定要关闭的半通道。在最常见的情况是,通过调用shutdown(1)关闭TX半通道。在TCP层,它发送一个FIN包,如果在read()上阻塞,远程端将接收0个字节,但由于RX半通道仍然打开,远程端仍然可以发送数据。在一些应用程序协议使用这个来通知消息的结束。其他一些协议基于数据本身找到EOM。例如,在交互..._python如何退出套接字阻塞

python——列表_建立列表list=“张三”“李四”“王五”-程序员宅基地

文章浏览阅读151次。列表1、定义List(列表)是python中使用最频繁的数据类型,在其他语言中通常叫做数组,专门存储一串信息,列表用[ ]定义,数据之间使用逗号分隔,列表的索引从0开始,索引又可以被称为下标。2、常用操作(方法)分类关键字/方法说明增加insert(索引、数据)在指定位置插入数据append(数据)在末尾追加数据extend(列表2)将列表2的数据追加到列表修改列表[索引]=数据修改指定索引的数据删除_建立列表list=“张三”“李四”“王五”

Linux make学习_linux m'ake-程序员宅基地

文章浏览阅读2k次。概述——什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和 professional的程序员,makefile还是要懂。这就好像现在有这么多的HTML的编辑器,但如果你想成为一个专业人士,你还是要了解HTML的标识的含义。特别在Unix下的软件编译,你就不能不自己写makefile_linux m'ake

Exception in thread “main“ java.util.zip.ZipException: error in opening zip file_"exception in thread \"main\" java.util.zip.zipexc-程序员宅基地

文章浏览阅读2.3k次。Flutter run报错Running Gradle task 'assembleDebug'...[!] Gradle threw an error while downloading artifacts from the network. Retrying to download...Exception in thread "main" java.util.zip.ZipException: error in opening zip file at java.util.zip.ZipFile._"exception in thread \"main\" java.util.zip.zipexception: error in opening zip"

苹果cms替换资源_苹果cms怎么做seo?-程序员宅基地

文章浏览阅读511次。苹果cms怎么做seo?苹果cms怎么做seo?由于早期之前做过一个自己公司网站,当时并没有注意到关键词排名问题,后来公司接到一个seo优化的单,当时我们也没那个能力,只得托人去做seo;从这以后,我们充分认识到seo优化的重要性,于是本编就开始了seo之路,拿了公司网站做实验,经过了短短一星期的疯狂的一次次的打开百度找相关资料,并且加了很多seo群(当时我记得加了苹果cms群,mytheme.c..._苹果cms sitemap

随便推点

org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection;-程序员宅基地

文章浏览阅读1.3k次。The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.at org.mybatis.spring.MyBatisExceptionTranslator.translateExceptionIfP..._org.springframework.jdbc.cannotgetjdbcconnectionexception: could not get jdb

python3.6基础语法_Python基础语法介绍(3)-程序员宅基地

文章浏览阅读48次。元组基本概念、特性顺序存储相同/不同类型的元素定义:使用()将元素括起来,元素之间用“,”括开特性:不可变,不支持添加,修改,删除等操作查询:通过下标查询元组指定位置的元素其他空元组定义:non_tuple = ()只包含一个元素的元组:one_tuple = ("one",)顺序存储相同/不同类型的元素user_info = ("Wukong", 100, "male", "138349284..._python3.6基本语法

实践 | 基于Skip-gram实现Word2Vec-程序员宅基地

文章浏览阅读291次。Skip-gram的算法实现Skip-gram的实际实现在实际情况中,vocab_size通常很大(几十万甚至几百万),导致W非常大。为了缓解这个问题,通常采取负采样(negative_sampling)的方式来近似模拟多分类任务。假设有一个中心词c和一个上下文词正样本tp。在Skip-gram的理想实现里,需要最大化使用c推理tp的概率。在使用softmax学习时,需要最大化tp 的推理概率,同时最小化其他词表中词的推理概率。之所以计算缓慢,是因为需要对词表中的所有词都计算一遍。然而我们还可以使用_基于skip-gram

用python给游戏加上音效_添加声音到你的Python游戏-程序员宅基地

文章浏览阅读1.5k次。通过添加声音到你的游戏中,听听当你的英雄战斗、跳跃、收集战利品时会发生什么。学习如何在这个 Pygame 系列中,创建一个声音平台类精灵。Pygame 提供了一种简单的方法来集成声音到你的 Python 电脑游戏中。Pygame 的 mixer 模块 可以依据命令播放一个或多个声音,并且你也可以将这些声音混合在一起,例如,你能够在听到你的英雄收集奖励或跳过敌人声音的同时播放背景音乐。集成 mixe..._python pygame.mixer.sound

消息中间件Kafka与RabbitMQ谁更胜一筹?_大厂用rabbitmq更多还是kafka更多?-程序员宅基地

文章浏览阅读371次。在 IM 这种讲究高并发、高消息吞吐的互联网场景下,MQ 消息中间件是个很重要的基础设施,它在 IM 系统的服务端架构中担当消息中转、消息削峰、消息交换异步化等角色。 当然,MQ 消息中间件的作用远不止于此,它的价值不仅仅存在于技术上,更重要的是改变了以往同步处理消息的思路。比如进行 IM 消息历史存储时,传统的信息系统作法可能是收到一条消息就马上同步存入数据库,这种作法在小并发量的情..._大厂用rabbitmq更多还是kafka更多?

Android 5.1 Lollipop Phone工作流程浅析(十三)__InCallActivity启动Performance浅析_bind incallservice-程序员宅基地

文章浏览阅读1.1w次,点赞8次,收藏13次。Google在2015年3月9日低调发布了Android 5.1,从官方博客的描述来看只是进行了小幅更新,如增加多SIM卡支持,HD Voice支持等。虽然Google对外声称只是稳定性和性能上的微调,但在查看Telephony Phone相关代码后,Android 5.1在这一块的动作还是很大的。_bind incallservice

推荐文章

热门文章

相关标签