Card 卡片

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

基础用法

包含标题,内容和操作。

Card 卡片 - 图1

Card 组件包括headerbody部分,header部分需要有显式具名 slot 分发,同时也是可选的。

  1. <el-card class="box-card">
  2. <div slot="header" class="clearfix">
  3. <span>卡片名称</span>
  4. <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
  5. </div>
  6. <div v-for="o in 4" :key="o" class="text item">
  7. {{'列表内容 ' + o }}
  8. </div>
  9. </el-card>
  10. <style>
  11. .text {
  12. font-size: 14px;
  13. }
  14. .item {
  15. margin-bottom: 18px;
  16. }
  17. .clearfix:before,
  18. .clearfix:after {
  19. display: table;
  20. content: "";
  21. }
  22. .clearfix:after {
  23. clear: both
  24. }
  25. .box-card {
  26. width: 480px;
  27. }
  28. </style>

简单卡片

卡片可以只有内容区域。

Card 卡片 - 图2

  1. <el-card class="box-card">
  2. <div v-for="o in 4" :key="o" class="text item">
  3. {{'列表内容 ' + o }}
  4. </div>
  5. </el-card>
  6. <style>
  7. .text {
  8. font-size: 14px;
  9. }
  10. .item {
  11. padding: 18px 0;
  12. }
  13. .box-card {
  14. width: 480px;
  15. }
  16. </style>

带图片

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

Card 卡片 - 图3

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

  1. <el-row>
  2. <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
  3. <el-card :body-style="{ padding: '0px' }">
  4. <img src="~examples/assets/images/hamburger.png" class="image">
  5. <div style="padding: 14px;">
  6. <span>好吃的汉堡</span>
  7. <div class="bottom clearfix">
  8. <time class="time">{{ currentDate }}</time>
  9. <el-button type="text" class="button">操作按钮</el-button>
  10. </div>
  11. </div>
  12. </el-card>
  13. </el-col>
  14. </el-row>
  15. <style>
  16. .time {
  17. font-size: 13px;
  18. color: #999;
  19. }
  20. .bottom {
  21. margin-top: 13px;
  22. line-height: 12px;
  23. }
  24. .button {
  25. padding: 0;
  26. float: right;
  27. }
  28. .image {
  29. width: 100%;
  30. display: block;
  31. }
  32. .clearfix:before,
  33. .clearfix:after {
  34. display: table;
  35. content: "";
  36. }
  37. .clearfix:after {
  38. clear: both
  39. }
  40. </style>
  41. <script>
  42. export default {
  43. data() {
  44. return {
  45. currentDate: new Date()
  46. };
  47. }
  48. }
  49. </script>

卡片阴影

可对阴影的显示进行配置。

Card 卡片 - 图4

通过shadow属性设置卡片阴影出现的时机:alwayshovernever

  1. <el-row :gutter="12">
  2. <el-col :span="8">
  3. <el-card shadow="always">
  4. 总是显示
  5. </el-card>
  6. </el-col>
  7. <el-col :span="8">
  8. <el-card shadow="hover">
  9. 鼠标悬浮时显示
  10. </el-card>
  11. </el-col>
  12. <el-col :span="8">
  13. <el-card shadow="never">
  14. 从不显示
  15. </el-card>
  16. </el-col>
  17. </el-row>

Attributes

参数 说明 类型 可选值 默认值
header 设置 header,也可以通过 slot#header 传入 DOM string
body-style 设置 body 的样式 object { padding: '20px' }
shadow 设置阴影显示时机 string always / hover / never always

原文: http://element-cn.eleme.io/#/zh-CN/component/card