Card 卡片
优质
小牛编辑
130浏览
2023-12-01
将信息聚合在卡片容器中展示。
基础用法
包含标题,内容和操作。
<el-card class="box-card"> <ng-template #header> <div class="clearfix"> <span style="line-height: 36px;">卡片名称</span> <el-button style="float: right;" type="primary">操作按钮</el-button> </div> </ng-template> <div *ngFor="let item of [0, 1, 2, 4]" class="text item"> {{'列表内容 ' + item }} </div> </el-card>
简单卡片
卡片可以只有内容区域。
<el-card class="box-card"> <div *ngFor="let item of [0, 1, 2, 4]" class="text item"> {{'列表内容 ' + item }} </div> </el-card>
带图片
可配置定义更丰富的内容展示。
配置 body-style
属性来自定义 body
部分的样式,我们还使用了布局组件。
<div el-row> <div el-col span="8" *ngFor="let item of [0, 1]" [offset]="item > 0 ? 2 : 0"> <el-card body-style="padding: 0px"> <img src="http://element.eleme.io/1.4/static/hamburger.50e4091.png" class="image"> <div style="padding: 14px;"> <span>好吃的汉堡</span> <div class="bottom clearfix"> <time class="time">{{ currentDate() | date: 'dd/MM/yyyy' }}</time> <el-button type="text" class="button">操作按钮</el-button> </div> </div> </el-card> </div> </div>
Card Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
header | 设置 header | string | ||
#header | 通过模板设置 #header,设置此项将忽略属性 [header] | ng-template | ||
body-style | 设置 body 的样式,会将字符串转换为 SafeStyle,直接传入字符串即可,如: body-style="padding: 20px" | string |