vue element plus Layout 布局

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

TIP

组件默认使用 Flex 布局,不需要手动设置 type="flex"

请注意父容器避免使用 inline 相关样式,会导致组件宽度不能撑满。

基础布局#

使用列创建基础网格布局。

通过 row 和 col 组件,并通过 col 组件的 span 属性我们就可以自由地组合布局。

分栏间隔#

支持列间距。

行提供 gutter 属性来指定列之间的间距,其默认值为0。

混合布局#

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

列偏移#

您可以指定列偏移量。

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

对齐方式#

默认使用 flex 布局来对分栏进行灵活的对齐。

您可以通过justify 属性来定义子元素的排版方式,其取值为start、center、end、space-between、space-around或space-evenly。

响应式布局#

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

基于断点的隐藏类#

Element Plus 额外提供了一系列类名,用于在某些条件下隐藏元素。 这些类名可以添加在任何 DOM 元素或自定义组件上。 如果需要,请自行引入以下文件:

import 'element-plus/theme-chalk/display.css'

这些类名为:

  • hidden-xs-only - 当视口在 xs 尺寸时隐藏
  • hidden-sm-only - 当视口在 sm 尺寸时隐藏
  • hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
  • hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
  • hidden-md-only - 当视口在 md 尺寸时隐藏
  • hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
  • hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
  • hidden-lg-only - 当视口在 lg 尺寸时隐藏
  • hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
  • hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
  • hidden-xl-only - 当视口在 xl 尺寸时隐藏

Row API#

Row Attributes#

属性名说明类型默认值
gutter栅格间隔number0
justifyflex 布局下的水平排列方式enumstart
alignflex 布局下的垂直排列方式enum
tag自定义元素标签stringdiv

Row Slots#

插槽名说明子标签
default自定义默认内容Col

Col API#

Col Attributes#

属性名说明类型默认值
span栅格占据的列数number24
offset栅格左侧的间隔格数number0
push栅格向右移动格数number0
pull栅格向左移动格数number0
xs<768px 响应式栅格数或者栅格属性对象number / object
sm≥768px 响应式栅格数或者栅格属性对象number / object
md≥992px 响应式栅格数或者栅格属性对象number / object
lg≥1200px 响应式栅格数或者栅格属性对象number / object
xl≥1920px 响应式栅格数或者栅格属性对象number / object
tag自定义元素标签stringdiv

Col Slots#

插槽名说明
default自定义默认内容

源代码#

文档

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

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

相关文章

CentOS找回root密码

很悲伤&#xff0c;你忘记了root密码。。。 那就来重置它吧~ 1、在启动时选择操作系统&#xff1a;在引导过程中&#xff0c;选择CentOS操作系统并按下键盘上的任意键来停止引导。 2、 进入编辑模式&#xff1a;在启动菜单中&#xff0c;找到并选择要编辑的CentOS条目&…

63、图片预处理:Resize and Crop

在进行图像处理之前,很多时候需要对图片先进行预处理,而最常见的预处理方法是 Resize and Crop。 在 resnet50 的实战中,在进行一张图片的推理实验之前,我们也会对输入的图像进行 Resize and Crop 操作。 这一节就介绍下这两个预处理操作。 实际上,Resize and Crop 是两…

Prometheus实战篇:Prometheus监控mongodb

Prometheus实战篇:Prometheus监控mongodb 准备环境 docker-compose安装mongodb docker-compose.yaml version: 3 services:mongo:image: mongo:4.2.5container_name: mongorestart: alwaysvolumes:- /data/mongo/db: /data/dbport:- 27017:27017command: [--auth]enviromen…

PHP数组复习

定义索引数组 $arr[0] 123; //整数 $arr[1] "hello"; //字符串 $arr[2] 45.6; //浮点数 $arr[3] true; //布尔值 $arr[4] null; //null 赋值方式定义关联数组 $arr["id"] 1; $arr["name"] "某某"; $a…

VMware复制粘贴共享文件夹

win和虚拟机之间&#xff0c;无法复制粘贴&#xff0c;共享文件夹的解决方案。 安装VMware tools 1&#xff0c;先检查虚拟机设置部分。共享文件夹已启用。复制粘贴已启用。 2&#xff0c;安装tools.选择重新安装VMware tools. (此图片为安装过的截图) 成功后会显示如图。…

【2024最新-python3小白零基础入门】No1.python简介以及环境搭建

文章目录 一 python3 简介二 python语言的特点三 python安装四 安装开发工具-pycharm五 新建一个python项目1.新建项目2 配置虚拟环境3 运行项目 一 python3 简介 Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 Python 的设计具有很强的可读性&a…

批量置入视频封面:一分钟教程,简单易学

在视频制作过程中&#xff0c;为视频添加引人注目的封面是吸引观众的关键。而当我们需要批量处理多个视频时&#xff0c;如何快速、准确地置入封面就显得尤为重要。本文将为您揭示这一高效技巧&#xff0c;让您在一分钟内学会批量置入视频封面&#xff0c;提升视频的吸引力与观…

vite 如何设置 pwa,让网页类似 app 那样运行,使用插件 vite-plugin-pwa

vite 如何设置 pwa&#xff0c;让网页类似 app 那样运行&#xff0c;使用插件 vite-plugin-pwa 一、概述 情况还是那么个情况&#xff0c;还是原来的项目 vue2 改为 vitetsvue3 遇到的问题&#xff0c;今天这个问题是如何 在 Vite 环境下设置 PWA。 PWA 就是网页应用可以像 a…

java是值传递还是引用传递

1.前言 java是值传递&#xff1b;值传递是指在调用方法时将实际参数拷贝一份传递到方法中&#xff0c;这样在方法中如果对参数进行修改&#xff0c;将不会影响到实际参数&#xff1b;当传的是基本类型时&#xff0c;传的是值的拷贝&#xff0c;对拷贝变量的修改不影响原变量&a…

2023职业规划与心灵成长-7年JAVA开发的自我思考

博主是一个知足长乐&#xff0c;安于现状&#xff0c;热爱编程&#xff0c;家庭大于一切 的技术小达人。 19年从一家中型软件公司研发岗跳到了一家小国有企业的IT部&#xff1b;已经4年了&#xff0c;记录下当下历程吧&#xff0c;留给以后得自己看也给目前各位想跳的朋友参考下…

krpano官网文档翻译-------krpano Action脚本参考文档【krpano Actions / Scripting Reference】

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》 ​ ​ ✨ 前言 摘要:本文通过大量代码案例,手把手教你如何使用krpano的Action脚本实现各种交互控制和酷炫…

OpenAI ChatGPT-4开发笔记2024-01:开发环境

ChatGPT发展一日千里。工具、函数少则数日&#xff0c;多则数月就加入了Deprecated行列不再如预期般工作。元旦闲来无事&#xff0c;用最新的ChatGPT重写一下各种开发场景&#xff0c;全部实测通过。 开发环境&#xff1a; 电脑&#xff1a;两台笔记本&#xff1a;HP和MacBoo…

代码随想录day24 开启回溯算法

个人见解 感觉回溯算法其实和递归很像&#xff0c;也是用递归的做法&#xff0c;也有三部曲&#xff0c;但又不太一样的地方是递归中类似二叉树&#xff0c;只有纵向遍历&#xff08;一层层往下遍历&#xff0c;没有横向遍历&#xff09;&#xff0c;而回溯算法中多的for循环就…

服务端性能测试——性能测试体系

目录&#xff1a; 1.性能测试介绍 性能测试介绍性能体系&#xff1a;性能测试与分析优化&#xff1a;行业流行性能压测工具介绍行业流行性能监控工具介绍行业流行性能剖析工具介绍性能测试流程与方法性能测试计划 计划&#xff1a;DAU&#xff0c;PV(perday)&#xff0c;订单量…

C#COM对象的资源释放

在C#中使用COM对象时&#xff0c;由于COM对象遵循引用计数&#xff08;Reference Counting&#xff09;的管理方式&#xff0c;当COM对象的引用计数为0时&#xff0c;系统才会真正释放该COM对象所占用的资源。然而&#xff0c;在.NET环境下&#xff0c;CLR&#xff08;Common L…

HTTP 3xx状态码:重定向的场景与区别

HTTP 状态码是服务器响应请求时传递给客户端的重要信息。3xx 系列的状态码主要与重定向有关&#xff0c;用于指示请求的资源已被移动到不同的位置&#xff0c;需要采取不同的操作来访问。 一、301 Moved Permanently 定义&#xff1a; 服务器表明请求的资源已永久移动到一个新…

Fluids —— Volume VOP

P&#xff0c;当前体素位置&#xff1b;density&#xff0c;此场的值&#xff1b;ix, iy, iz&#xff0c;体素索引&#xff08;0 ~ res-1&#xff09;&#xff1b;resx, resy, resz&#xff0c;当前volume的精度&#xff1b;center&#xff0c;当前volume的中心点&#xff1b;o…

STM32入门教程-2023版【3-3】gpio输入

关注 星标公众号 不错过精彩内容 大家好&#xff0c;我是硬核王同学&#xff0c;最近在做免费的嵌入式知识分享&#xff0c;帮助对嵌入式感兴趣的同学学习嵌入式、做项目、找工作! 上两小节我们已经把GPIO的结构和8种输入输出模式都讲完了&#xff0c;到这里还不懂的可以回…

记录汇川:ITP与Autoshop进行仿真连接

1、定义如下程序&#xff1a; 2、ITP新建工程&#xff1a; 3、依次选择&#xff0c;最后修改IP 4、定义两个变量 5、拖一个按钮和一个圈出来&#xff0c;地址绑定&#xff1a;M1 6、地址绑定&#xff1a;Y1 7、PLC启动仿真 8、ITP启动在线模拟器 9、即可实现模拟仿真

scripts:查看数据库历史增长情况

查看数据库历史增长情况 此处是通过计算数据库所有表空间的历史增长情况来计算数据库历史情况。 --不含undo和temp with tmp as (select rtime, sum(tablespace_usedsize_kb) tablespace_usedsize_kb, sum(tablespace_size_kb) tablespace_size_kb from (select rtime, e.ta…