Card 卡片
将信息聚合在卡片容器中展示。
基础用法
包含标题,内容和操作。
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>
简单卡片
卡片可以只有内容区域。
<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 卡片的更多相关文章
- Flutter学习笔记(21)--TextField文本框组件和Card卡片组件
如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件 今天来学习下TextField文本框组件和Card卡片组件. 只要是应用程序就少不了交互,基本上 ...
- flutter Card卡片列表组件
一个 Material Design 卡片.拥有一个圆角和阴影 import 'package:flutter/material.dart'; import './model/post.dart'; ...
- Flutter AspectRatio、Card 卡片组件
Flutter AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widg ...
- AspectRatio图片的宽高比、Card 卡片组件
一.AspectRatio 组件 AspectRatio 的作用是根据设置调整子元素 child 的宽高比. AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度 ...
- 3、card 卡片
1.基本用法的使用 /* --- htm l----*/ <ion-content> <ion-card> <ion-card-header> Header < ...
- Bootstrap学习记录-3.Badge、Breadcrumb、Buttons、 Button Group、Card、Carousel
1. Badge Badge作为数值标记组件,它能作为链接或按钮的一部分来提供计数作用,而且它通过使用相对字体大小来适应父级元素的大小.它的最基本的修饰符为.badge .badge-*. <b ...
- Android 之 2048 的游戏逻辑分析
继续学习了极客学院的实战路径课程,讲到了2048游戏的编写过程,我在这里作个总结分享给大家(结果会附源代码和我改写后的代码): 这里主要包括两个方面:1.2048界面的绘制 2.2048算法逻辑的 ...
- English word
第一部分 通过词缀认识单词 (常用前缀一) 1.a- ①加在单词(形容词)或词根前面,表示"不,无,非" acentric [ə'sentrik] a 无中心的(a+centr ...
- 越狱Season 1-Episode 19: The Key
Season 1, Episode 19: The Key -Kellerman: WeusedtohaveaGreatDane, Dane: 丹麦大狗 我们以前有一只大丹犬 bigandwild. ...
随机推荐
- How to mount remote Windows shares
Contents Required packages Basic method Better Method Even-better method Yet Another Even-better m ...
- Jquery实现类似百度的搜索框
最近工作中需要做一个搜索框,类似百度的搜索框,需要达到两个功能: 1.输入关键字,展示匹配的下拉列表 2.选择匹配的项后查出相关内容 一般电商网站中也经常用到该搜索条,首先分析功能实现,输入关键字马上 ...
- moment.js 使用方法记录
操作 设值/赋值 1. 具体方法. 1)毫秒(millisecond) moment().millisecond(Number); moment().millisecond(); // Number ...
- 设计模式相关面试问题-Builder基础详解与代码解读
java的builder模式详解: 概念:建造者模式是较为复杂的创建型模式,它将客户端与多含多个组成部分(或部件)的复杂对象的创建过程分离. 使用场景:当构造一个对象需要很多参数的时候,并且参数的个数 ...
- 我遇到的Echarts 最大值不显示&平均值不正常
用Echarts做图表的时候,遇到最大值不显示和平均值不正常的问题,如图: 找了半天,原来是X轴6个坐标有7个数据,只是最后那个数据没有显示出来,而且还是最大的,无语. 加上第七个坐标之后,就显示正常 ...
- docker下安装运行mysql的过程以mysql5.7为例
一.查找mysql资源 docker search mysql 其实这步顶多是看看有哪些mysql资源,除非你自己commit过一个特定的版本,否则直接执行下一步 二.安装mysql docker p ...
- mysql修改数据存储路径报错处理
Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'解决?: >>> vim ...
- 交换机配置——VTP管理交换机的VLAN配置
一.实验目的:将S1配置成VTP-Server,S2配置成VTP-Transparent,S3配置成VTP-Client,S4配置成VTP-Client 二.拓扑图如下 三.具体步骤: (1)S1交换 ...
- 51 Nod 1035 最长的循环节 (此题还不是很懂,日后再看)
转自: https://blog.csdn.net/define_danmu_primer/article/details/52456763 51nod 1035 最长的循环节(无限小数的循环节) 2 ...
- codeforces643D
阿狸的基环内向树森林 Background 当阿狸醒来的时候,发现自己处在基环内向森林的深处,阿狸渴望离开这个乌烟瘴气的地方.“明天还有与桃子的约会呢”,阿狸一边走一边说,“可是,这个森林的出口在哪儿 ...