【Element-ui】Layout与Container组件

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一、Layout 布局
    • 1.1 基础布局
    • 1.2 分栏间隔
    • 1.3 混合布局
    • 1.4 分栏偏移
    • 1.5 对齐方式
    • 1.6 响应式布局
    • 1.7 el-col中的 push和pull
  • 二、Container 布局容器
    • 2.1 Container是干什么的?
    • 2.2 Container Attributes
    • 2.3 Header Attributes
    • 2.4 Aside Attributes
    • 2.5 Footer Attributes
  • 总结


前言

在现代Web开发中,页面的布局设计是至关重要的一环。为了简化布局的实现,Element UI提供了强大的Layout和Container组件。这两个组件使得页面布局变得更加灵活和易于管理。在本文中,我们将深入探讨Element UI的Layout和Container组件,了解它们的基本用法以及如何通过它们实现响应式的页面布局。


一、Layout 布局

通过基础的 24 分栏,迅速简便地创建布局。

1.1 基础布局

使用单一分栏创建基础的栅格布局。

<el-row><el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row><el-col :span="12"><div class="grid-content bg-purple"></div></el-col><el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

在这里插入图片描述

el-row:
el-row 是一个容器,用于包含一组列(el-col)。
在示例中,你可以看到多个 el-row 组件,每个都代表页面中的一行。

el-col:
el-col 是列元素,用于放置内容。通过设置 :span 属性,你可以指定每列的宽度占比,这里使用的是栅格系统,总宽度为 24。
例如,:span=“24” 表示占满整行,:span=“12” 表示占据一半的宽度,:span=“8” 表示占据三分之一的宽度,以此类推。

嵌套布局:
注意到在某些 el-col 中,又包含了新的 el-row 和 el-col,形成了嵌套的布局结构。这种嵌套使得布局更加灵活,可以根据设计需求创建多层次的页面结构。

1.2 分栏间隔

Row 组件 提供 gutter 属性来指定每一栏之间的间隔,默认间隔为 0。

<el-row :gutter="20"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

在这里插入图片描述

指定每一栏之间的间隔是什么意思:
想象一下你有一排书架,每一本书代表页面上的一个栏。这些书之间的空隙就是书架上的间隔。

现在,假设你想在每本书的旁边留一些空地,让它们之间不那么紧凑,这就是指定每一栏之间的间隔。在这个场景中,书本就是栅格布局中的每一栏,而书本之间的空地就是间隔。通过设置 gutter 属性,你就可以控制每一栏之间的空隙大小,使得整体布局看起来更加舒适和有序。

1.3 混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

<el-row :gutter="20"><el-col :span="16"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20"><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20"><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="16"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>

1.4 分栏偏移

当你在设计网页布局时,有时候你可能希望某个元素(比如一个列)不是从页面的最左侧开始,而是往右边偏移一些。就好像你在排列一行书架上的书,你想让某本书不是直接靠在书架的一端,而是有一些空隙。
在这个情境中,网页的布局中,每一列可以看作是一本书,而设置 col 组件的 offset 属性,就像是告诉系统:“嗨,请把这一列(书)从左边开始数起,往右偏移一定的距离,就好像在书架上移动了几本书一样。”
这个偏移量是以列数为单位的,所以如果你设置了 offset: 2,就相当于这一列向右移动了两列的宽度。这样,你就可以更加灵活地控制页面上各个元素的位置,创造出更多样化的布局效果。

支持偏移指定的栏数。
通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

<el-row :gutter="20"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20"><el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20"><el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

在这里插入图片描述

1.5 对齐方式

通过 flex 布局来对分栏进行灵活的对齐。

将 type 属性赋值为 ‘flex’,可以启用 flex 布局,并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。

<el-row type="flex" class="row-bg"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="center"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="end"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-between"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

1.6 响应式布局

参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs、sm、md、lg 和 xl。

想象一下你在使用一个网站,而这个网站需要适应不同设备的屏幕大小,比如手机、平板电脑和桌面电脑。为了让这个网站在各种设备上都能够看起来好看而不失功能,设计师们通常会采用响应式布局。
Bootstrap 提出了一套响应式设计的概念,其中包括了五个预设的尺寸:xs、sm、md、lg 和 xl。

1.xs(Extra Small): 针对极小屏幕,比如手机。
2.sm(Small): 针对小屏幕,比如平板。
3.md(Medium): 针对中等屏幕,比如大一点的平板或小一点的桌面电脑。
4.lg(Large): 针对大屏幕,比如桌面电脑。
5.xl(Extra Large): 针对极大屏幕,比如大尺寸的桌面显示器。

通过这种预设的尺寸,设计者可以为每个屏幕尺寸定义不同的布局规则,确保在不同的设备上都能够提供最佳的用户体验。所以,当你看到一个网站是“响应式设计”时,就意味着它会根据你使用的设备类型和屏幕大小,动态地调整页面的布局和样式,以便更好地适应不同的环境。这样,无论你是在手机上浏览还是在桌面电脑上查看,都能够获得舒适的浏览体验。

1.7 el-col中的 push和pull

参数 说明 类型 可选值 默认值
push 栅格向右移动格数 number — 0
pull 栅格向左移动格数 number — 0

想象一下你有一排书架,每一本书代表页面上的一个栏。现在,假设你想要移动某本书在书架上的位置,使它不再在原来的位置上。

1.push(向右推移): 如果你想把某本书往右边移动几本书的位置,就像是把它往书架的右侧推一样,那么在网页布局中,你可以使用 push 属性。这个属性的值表示你要把这一栏(或元素)向右移动的格数。
2.pull(向左拉动): 相反,如果你想把某本书往左边移动,就像是把它往书架的左侧拉一样,那么在网页布局中,你可以使用 pull 属性。这个属性的值表示你要把这一栏(或元素)向左移动的格数。

总的来说,push 和 pull 属性可以帮助你在栅格布局中灵活地调整元素的位置,就像是在书架上移动书本一样,让你更好地控制页面的布局。

二、Container 布局容器

2.1 Container是干什么的?

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

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

<el-header>:顶栏容器。

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

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

<el-footer>:底栏容器。

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

2.2 Container Attributes

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

2.3 Header Attributes

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

2.4 Aside Attributes

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

2.5 Footer Attributes

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


总结

Element UI 的 Layout 和 Container 组件为页面布局提供了便利的解决方案。通过灵活的组合,我们可以轻松创建出各种风格的页面布局,满足不同项目的需求。使用这些组件,不仅可以提高开发效率,还能确保页面的响应式设计,使得应用在不同设备上都能够良好地展现。在你的下一个Vue.js项目中,不妨考虑使用Element UI的Layout和Container组件,体验它们带来的便利和灵活性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/255075.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

组合数学历年真题-西北工业大学-持续更新中~

组合数学历年考题使用说明 本文档设立的初衷是帮学弟学妹们获得一份免费且纯净的组合数学习题&#xff0c;把注意力和时间花在知识本身而不要浪费在筛选垃圾资料上。截止本文档创立时&#xff0c;学校并未提供官方习题内容&#xff0c;所有内容均为学长手动整理且部分为回忆版…

定义一个学生类,其中有3个私有数据成员学号、姓名、成绩,以及若于成员。 函数实现对学生数据的赋值和输出。

#include <stdio.h> // 定义学生类 typedef struct Student { int stuNum; // 学号 char name[20]; // 姓名&#xff0c;假设最长为20个字符 float score; // 成绩 } Student; // 初始化学生信息 void initializeStudent(Student *student, int num, const…

移动云“遇见大咖”|玻色量子副总裁巨江伟:超越摩尔定律的新型计算革命

移动云MVP&#xff0c;作为产品共建专家、关键意见领袖及技术布道者&#xff0c;帮助开发者更好地了解和使用移动云。开发者社区希望携手移动云MVP&#xff0c;与开发者共生、共赢、共成长。 8月31日&#xff0c;移动云开发者社区“遇见大咖”系列活动第2期——“[量子计算]超越…

《opencv实用探索·十二》opencv之laplacian(拉普拉斯)边缘检测,Scharr边缘检测,Log边缘检测

1、Laplacian算子 Laplacian&#xff08;拉普拉斯&#xff09;算子是一种二阶导数算子&#xff0c;其具有旋转不变性&#xff0c;可以满足不同方向的图像边缘锐化&#xff08;边缘检测&#xff09;的要求。同时&#xff0c;在图像边缘处理中&#xff0c;二阶微分的边缘定位能力…

MJPG-streamer方案实现物联网视频监控

目录 前言 一、JPEG&#xff0c;MJPG格式简介 JPEG MJPG MJPG的优点 MJPG的缺点 二、软硬件准备 三、编译MJPG-streamer 四、运行MJPG-streamer 五、其它常见用法 六、MJPG-streamer 程序框架 七、源码下载 前言 最近想做一个安防相关的项目&#xff0c;所以跟着韦…

Python语言基础知识(一)

文章目录 1、Python内置对象介绍2、标识符与变量3、数据类型—数字4、数据类型—字符串与字节串5、数据类型—列表、元组、字典、集合6、运算符和表达式7、运算符和表达式—算术运算符8、运算符和表达式—关系运算符9.1、运算符和表达式— 成员测试运算符in9.2、运算符和表达式…

jQuery ajax读取本地json文件 三级联动下拉框

步骤 1&#xff1a;创建本地JSON文件 {"departments": [{"name": "会计学院","code": "052"},{"name": "金融学院","code": "053"},{"name": "财税学院",&qu…

CRM客户管理系统,不止管理客户。

CRM系统现在已经成为企业与客户建立良好关系、提高销售业绩的优先选择。关于CRM的功能&#xff0c;不同的企业包括CRM软件厂商都对CRM系统有不同的定义。基于此&#xff0c;我们来聊聊CRM客户管理系统除了管客户还有什么功能&#xff1f; 1、客户管理 有些企业管理客户的方式…

探索低代码的潜力、挑战与未来展望

低代码开发作为一种新兴的开发方式&#xff0c;正在逐渐改变着传统的编程模式&#xff0c;低代码使得开发者无需编写大量的代码即可快速构建各种应用程序。然而&#xff0c;低代码也引发了一系列争议&#xff0c;有人称赞其为提升效率的利器&#xff0c;也有人担忧其可能带来的…

GUI的简单概述和基本使用

GUI的概念 1&#xff0c;到目前为止&#xff0c;我们编写的都是控制输入的程序&#xff0c;操作使用非常不直观&#xff0c;采取一直方式让效果呈现在窗口上。 2&#xff0c;GUI及图形界面指采用图像方式显示的用户界面&#xff0c;与早期计算机的命令行界面相比&#xff0c;…

文件拖拽操作工具 Dropzone 4 最新 for mac

Dropzone 4是一款Mac平台上的应用程序&#xff0c;提供了一个方便快捷的方式来执行各种任务。它可以将常用工具和操作整合到一个简洁的界面中&#xff0c;使用户能够更高效地完成日常工作。 以下是Dropzone 4的一些主要特点&#xff1a; 拖放功能&#xff1a;通过将文件、文件…

拨号连接bat命令和拨号错误623,系统无法找到此连接的电话簿项的解决方法

一、拨号bat命令 1、首先创建一个拨号连接&#xff0c;注意连接名称要使用英文 2、创建一个bat文件&#xff0c;里面内容 echo off chcp 65001rem 定义连接参数&#xff0c;第一个是用户名&#xff0c;第二个是密码 set usernameS11111111111 set passwords11111111111 set…