ElementUI 组件：Container 布局容器

• 算法结构

ElementUI安装与使用指南

Container 布局容器

点击下载learnelementuispringboot项目源码

效果图

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

项目里el-container.vue代码

import PagePath from "@/components/PagePath.vue";

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




  
    
Container 布局容器


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

    
    
      
  • el-container：外层容器。当子元素中包含 el-header 或 el-footer 时，全部子元素会垂直上下排列，否则会水平左右排列。
      
    • 
      
  • el-header：顶栏容器。
    • 
      
  • el-aside：侧边栏容器。
    • 
      
  • el-main：主要区域容器。
    • 
      
  • el-footer：底栏容器。
    • 
    

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

    
常见页面布局


    
样式一

    
      Header
      Main
    

    
样式二

    
      Header
      Main
      Footer
    

    
样式三

    
      Aside
      Main
    

    
样式四

    
      Header
      
        Aside
        Main
      
    

    
样式五

    
      Header
      
        Aside
        
          Main
          Footer
        
      
    

    
样式六

    
      Aside
      
        Header
        Main
      
    

    
样式七

    
      Aside
      
        Header
        Main
        Footer
      
    

    
Container 布局容器 实例


  





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

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

Container Attributes

在这里插入图片描述

Header Attributes

在这里插入图片描述

Aside Attributes

在这里插入图片描述

Footer Attributes

在这里插入图片描述

欢迎关注我的公众号，不定期推送优质的文章，

微信扫一扫下方二维码即可关注。

在这里插入图片描述

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/c10ff9af0e.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐