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

基础用法

包含标题,内容和操作。

Card 组件包括headerbody部分,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>

简单卡片

卡片可以只有内容区域。

 <el-card class="box-card">
<div v-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
</div>
</el-card> <style>
.text {
font-size: 14px;
} .item {
padding: 18px 0;
} .box-card {
width: 480px;
}
</style>

带图片

可配置定义更丰富的内容展示。

配置body-style属性来自定义body部分的style,我们还使用了布局组件。

 <el-row>
<el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
<el-card :body-style="{ padding: '0px' }">
<img src="~examples/assets/images/hamburger.png" class="image">
<div style="padding: 14px;">
<span>好吃的汉堡</span>
<div class="bottom clearfix">
<time class="time">{{ currentDate }}</time>
<el-button type="text" class="button">操作按钮</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row> <style>
.time {
font-size: 13px;
color: #999;
} .bottom {
margin-top: 13px;
line-height: 12px;
} .button {
padding: 0;
float: right;
} .image {
width: 100%;
display: block;
} .clearfix:before,
.clearfix:after {
display: table;
content: "";
} .clearfix:after {
clear: both
}
</style> <script>
export default {
data() {
return {
currentDate: new Date()
};
}
}
</script>

Attributes

参数 说明 类型 可选值 默认值
header 设置 header,也可以通过 slot#header 传入 DOM string
body-style 设置 body 的样式 object { padding: '20px' }

Card 卡片的更多相关文章

  1. Flutter学习笔记(21)--TextField文本框组件和Card卡片组件

    如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件 今天来学习下TextField文本框组件和Card卡片组件. 只要是应用程序就少不了交互,基本上 ...

  2. flutter Card卡片列表组件

    一个 Material Design 卡片.拥有一个圆角和阴影 import 'package:flutter/material.dart'; import './model/post.dart'; ...

  3. Flutter AspectRatio、Card 卡片组件

    Flutter AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widg ...

  4. AspectRatio图片的宽高比、Card 卡片组件

    一.AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度 ...

  5. 3、card 卡片

    1.基本用法的使用 /* --- htm l----*/ <ion-content> <ion-card> <ion-card-header> Header < ...

  6. Bootstrap学习记录-3.Badge、Breadcrumb、Buttons、 Button Group、Card、Carousel

    1. Badge Badge作为数值标记组件,它能作为链接或按钮的一部分来提供计数作用,而且它通过使用相对字体大小来适应父级元素的大小.它的最基本的修饰符为.badge .badge-*. <b ...

  7. Android 之 2048 的游戏逻辑分析

    继续学习了极客学院的实战路径课程,讲到了2048游戏的编写过程,我在这里作个总结分享给大家(结果会附源代码和我改写后的代码): 这里主要包括两个方面:1.2048界面的绘制   2.2048算法逻辑的 ...

  8. English word

    第一部分  通过词缀认识单词 (常用前缀一) 1.a- ①加在单词(形容词)或词根前面,表示"不,无,非" acentric [ə'sentrik] a  无中心的(a+centr ...

  9. 越狱Season 1-Episode 19: The Key

    Season 1, Episode 19: The Key -Kellerman: WeusedtohaveaGreatDane, Dane: 丹麦大狗 我们以前有一只大丹犬 bigandwild. ...

随机推荐

  1. How to mount remote Windows shares

      Contents Required packages Basic method Better Method Even-better method Yet Another Even-better m ...

  2. Jquery实现类似百度的搜索框

    最近工作中需要做一个搜索框,类似百度的搜索框,需要达到两个功能: 1.输入关键字,展示匹配的下拉列表 2.选择匹配的项后查出相关内容 一般电商网站中也经常用到该搜索条,首先分析功能实现,输入关键字马上 ...

  3. moment.js 使用方法记录

    操作 设值/赋值 1. 具体方法. 1)毫秒(millisecond) moment().millisecond(Number); moment().millisecond(); // Number ...

  4. 设计模式相关面试问题-Builder基础详解与代码解读

    java的builder模式详解: 概念:建造者模式是较为复杂的创建型模式,它将客户端与多含多个组成部分(或部件)的复杂对象的创建过程分离. 使用场景:当构造一个对象需要很多参数的时候,并且参数的个数 ...

  5. 我遇到的Echarts 最大值不显示&平均值不正常

    用Echarts做图表的时候,遇到最大值不显示和平均值不正常的问题,如图: 找了半天,原来是X轴6个坐标有7个数据,只是最后那个数据没有显示出来,而且还是最大的,无语. 加上第七个坐标之后,就显示正常 ...

  6. docker下安装运行mysql的过程以mysql5.7为例

    一.查找mysql资源 docker search mysql 其实这步顶多是看看有哪些mysql资源,除非你自己commit过一个特定的版本,否则直接执行下一步 二.安装mysql docker p ...

  7. mysql修改数据存储路径报错处理

    Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'解决?: >>> vim ...

  8. 交换机配置——VTP管理交换机的VLAN配置

    一.实验目的:将S1配置成VTP-Server,S2配置成VTP-Transparent,S3配置成VTP-Client,S4配置成VTP-Client 二.拓扑图如下 三.具体步骤: (1)S1交换 ...

  9. 51 Nod 1035 最长的循环节 (此题还不是很懂,日后再看)

    转自: https://blog.csdn.net/define_danmu_primer/article/details/52456763 51nod 1035 最长的循环节(无限小数的循环节) 2 ...

  10. codeforces643D

    阿狸的基环内向树森林 Background 当阿狸醒来的时候,发现自己处在基环内向森林的深处,阿狸渴望离开这个乌烟瘴气的地方.“明天还有与桃子的约会呢”,阿狸一边走一边说,“可是,这个森林的出口在哪儿 ...