Element组件浅尝辄止2:Card卡片组件

根据官方说法:

将信息聚合在卡片容器中展示。

1.啥时候使用?When?

既然是信息聚合的容器,那场景就好说了

  • 新建页面时可以用来当做页面容器
  • 页面的某一部分,可以用来当做子容器 

2.怎样使用?How?

 

//Card 组件包括header和body部分,header部分需要有显式具名 slot 分发,同时也是可选的。<el-card class="box-card"><div slot="header" class="clearfix"><span>卡片名称</span><el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button></div><div v-for="o in 4" :key="o" class="text item">{{'列表内容 ' + o }}</div>
</el-card><style>.text {font-size: 14px;}.item {margin-bottom: 18px;}.clearfix:before,.clearfix:after {display: table;content: "";}.clearfix:after {clear: both}.box-card {width: 480px;}
</style>

除此之外,Card 组件还可以只有内容区域、可对阴影的显示进行配置、或者根据需求定制配置更丰富的内容展示。

具体可查阅官方文档卡片组件

 

  • The only way to do great work is to love what you do.

 

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

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

相关文章

Linux Shell 编程入门

从程序员的角度来看&#xff0c; Shell本身是一种用C语言编写的程序&#xff0c;从用户的角度来看&#xff0c;Shell是用户与Linux操作系统沟通的桥梁。用户既可以输入命令执行&#xff0c;又可以利用 Shell脚本编程&#xff0c;完成更加复杂的操作。在Linux GUI日益完善的今天…

python实现简单的爬虫功能

前言 Python是一种广泛应用于爬虫的高级编程语言&#xff0c;它提供了许多强大的库和框架&#xff0c;可以轻松地创建自己的爬虫程序。在本文中&#xff0c;我们将介绍如何使用Python实现简单的爬虫功能&#xff0c;并提供相关的代码实例。 如何实现简单的爬虫 1. 导入必要的…

PostgreSQL和MySQL多维度对比

文章目录 0.前言1. 基础对比2.PostgreSQL和MySQL语法对比3. 特性4. 参考文档 0.前言 在当今的软件开发和数据管理领域&#xff0c;数据库是至关重要的基础设施之一。选择正确的数据库管理系统&#xff08;DBMS&#xff09;对于应用程序的性能、可扩展性和数据完整性至关重要。…

如何在Linux系统中安装ActiveMQ

1、环境 ActiveMQ是一个纯Java程序&#xff0c;这里安装5.18.2版ActiveMQ&#xff0c;该版MQ运行在JDK 11环境内&#xff0c;为此需要先搭建JDK 11环境&#xff0c;这里安装JDK 15。 1.1、卸载 卸载开源JDK软件包&#xff0c;如下所示&#xff1a; [rootlocalhost ~]# rpm -…

Stable Diffusion - 幻想 (Fantasy) 风格与糖果世界 (Candy Land) 的人物图像提示词配置

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132212193 图像由 DreamShaper8 模型生成&#xff0c;融合糖果世界。 幻想 (Fantasy) 风格图像是一种以想象力为主导的艺术形式&#xff0c;创造了…

Kubernetes集群yum安装部署

第四阶段 时 间&#xff1a;2023年8月10日 参加人&#xff1a;全班人员 内 容&#xff1a; Kubernetes集群yum安装部署 目录 yum方式部署K8S集群 一、环境搭建 1、准备环境 2、关闭防火墙 3、修改master主机的计算机名设置host文件 二、安装部署 &#xff08;一&…

Maven

目录 一&#xff0c;介绍 二&#xff0c;安装 2.1从官网下载Maven。 2.2下载完成后&#xff0c;解压到合适的位置即可&#xff0c;例如&#xff1a; D:\apache-maven-3.6.3 2.3.配置 新建系统变量 MAVEN_HOME和M2_HOME 编辑系统变量 Path&#xff0c;添加变量值&#xff…

Babylon.js着色器简明简称【Shader】

推荐&#xff1a;用 NSDT设计器 快速搭建可编程3D场景 为了生成 BabylonJS 场景&#xff0c;需要用 Javascript 编写代码&#xff0c;BabylonJS 引擎会处理该代码并将结果显示在屏幕上。 场景可以通过改变网格、灯光或摄像机位置来改变。 为了及时显示可能的变化&#xff0c;屏…

函数的递归

1、什么是递归&#xff1f; 程序调用自身的编程技巧称为递归。 递归作为一种算法在程序设计语言中广泛应用。一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法&#xff0c;它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解&#x…

中国信息安全测评中心CISP家族认证一览

随着国家对网络安全的重视&#xff0c;中国信息安全测评中心根据国家政策、未来趋势、重点内容陆续增添了很多CISP细分认证。 今日份详细介绍&#xff0c;部分CISP及其子品牌相关认证内容&#xff0c;一定要收藏哟&#xff01; 校园版CISP NISP国家信息安全水平考试&#xff…

云原生Kubernetes:阿里云托管k8s集群ACK创建和使用

目录 一、理论 1.容器服务Kubernetes版 2.ACK Pro版集群概述 3.ACK版本说明 二、实验 1.创建专有版Kubernetes集群 三、问题 1.依赖检查未通过 一、理论 1.容器服务Kubernetes版 &#xff08;1&#xff09;概念 阿里云容器服务Kubernetes版&#xff08;Alibaba Cloud…

Mapbox加载天地图CGCS2000矢量瓦片地图

1.背景 最近在做天地图的项目&#xff0c;要基于MapBox添加CGCS2000矢量切片数据&#xff0c;但是 Mapbox 只支持web 墨卡托&#xff08;3857&#xff09;坐标系的数据。Github有专业用户修改了mapbox-gl的相关代码&#xff0c;支持CGCS2000的切片数据加载&#xff0c;并且修改…

RocketMQ Learning(一)

目录 一、RocketMQ 0、RocketMQ的产品发展 1、RocketMQ安装 1.1、windows下的安装 注意事项 1.2、Linux下的安装 1.3、源码的安装 1.4、控制台 2、消息发送方式 2.1、发送同步消息 2.2、发送异步消息 2.3、单向发送 3、消息消费方式 3.1、负载均衡模式&#xff0…

[PyTorch][chapter 46][LSTM -1]

前言&#xff1a; 长短期记忆网络&#xff08;LSTM&#xff0c;Long Short-Term Memory&#xff09;是一种时间循环神经网络&#xff0c;是为了解决一般的RNN&#xff08;循环神经网络&#xff09;存在的长期依赖问题而专门设计出来的。 目录&#xff1a; 背景简介 LSTM C…

mac-右键-用VSCode打开

1.点击访达&#xff0c;搜索自动操作 2.选择快速操作 3.执行shell脚本 替换代码如下&#xff1a; for f in "$" doopen -a "Visual Studio Code" "$f" donecommand s保存会出现一个弹框&#xff0c;保存为“用VSCode打开” 5.使用

Dockerfile 简单实战

将flask项目打包成镜像 1. 准备flask文件 创建 app.py 文件&#xff0c;内容如下 from flask import Flask app Flask(__name__)app.route(/) def hello_world():return Hello Worldif __name__ __main__:app.run(host0.0.0.0, port8000, debugTrue) 并开启外网访问&#xf…

C#--设计模式之单例模式

单例模式大概是所有设计模式中最简单的一种&#xff0c;如果在面试时被问及熟悉哪些设计模式&#xff0c;你可能第一个答的就是单例模式。 单例模式的实现分为两种&#xff1a; 饿汉式&#xff1a;在静态构造函数执行时就立即实例化。懒汉式&#xff1a;在程序执行过程中第一…

vue3报错

这是因为eslint对代码的要求严格导致的&#xff0c;可以在package.json里面删掉"eslint:recommended"&#xff0c;然后重启就可以正常运行了

长城汽车正式进军东盟市场,多款智能新能源亮相印尼车展

长城汽车在2023年印尼国际车展&#xff08;GAIKINDO Indonesia International Auto Show&#xff09;揭幕GWM品牌系列车型&#xff0c;包括坦克500 HEV、哈弗H6 HEV、哈弗JOLION HEV以及欧拉好猫。这一战略旨在进一步打入印尼市场。 长城汽车宣布将正式进军东盟市场&#xff0c…

jumpserver命令记录膨胀问题

一.背景 jumpserver堡垒机针对只是接管ssh来说&#xff0c;正常操作Linux的指令记录应该不会太多&#xff0c;每天有个几千条都已经算很多了。所以默认jumpserver采用MySQL作为存储介质本身也没啥问题。但是我们使用jumpserver对【MySQL应用】进行了托管&#xff0c;导致查询SQ…