Card 卡片

通用卡片容器

何时使用

最基础的卡片容器,可承载文字、列表、图片、段落,常用于后台概览页面。

代码演示

Card卡片 - 图1

典型卡片

包含标题、内容、操作区域。
可通过设置size为default或者small,控制尺寸

  1. <template>
  2. <div>
  3. <a-card title="Default size card" style="width: 300px">
  4. <a slot="extra" href="#">more</a>
  5. <p>card content</p>
  6. <p>card content</p>
  7. <p>card content</p>
  8. </a-card>
  9. <br />
  10. <a-card size="small" title="Small size card" style="width: 300px">
  11. <a slot="extra" href="#">more</a>
  12. <p>card content</p>
  13. <p>card content</p>
  14. <p>card content</p>
  15. </a-card>
  16. </div>
  17. </template>

Card卡片 - 图2

更灵活的内容展示

可以利用 Card.Meta 支持更灵活的内容

  1. <template>
  2. <a-card hoverable style="width: 240px">
  3. <img
  4. slot="cover"
  5. alt="example"
  6. src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
  7. />
  8. <a-card-meta title="Europe Street beat">
  9. <template slot="description">
  10. www.instagram.com
  11. </template>
  12. </a-card-meta>
  13. </a-card>
  14. </template>

Card卡片 - 图3

栅格卡片

在系统概览页面常常和栅格进行配合。

  1. <template>
  2. <div style="background-color: #ececec; padding: 20px;">
  3. <a-row :gutter="16">
  4. <a-col :span="8">
  5. <a-card title="Card title" :bordered="false">
  6. <p>card content</p>
  7. </a-card>
  8. </a-col>
  9. <a-col :span="8">
  10. <a-card title="Card title" :bordered="false">
  11. <p>card content</p>
  12. </a-card>
  13. </a-col>
  14. <a-col :span="8">
  15. <a-card title="Card title" :bordered="false">
  16. <p>card content</p>
  17. </a-card>
  18. </a-col>
  19. </a-row>
  20. </div>
  21. </template>

Card卡片 - 图4

预加载的卡片

数据读入前会有文本块样式

  1. <template>
  2. <div>
  3. <a-card :loading="loading" title="Card title">
  4. whatever content
  5. </a-card>
  6. <a-button style="marginTop: 16px" @click="handleClick">
  7. Toggle loading
  8. </a-button>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. data() {
  14. return {
  15. loading: true,
  16. };
  17. },
  18. methods: {
  19. handleClick() {
  20. this.loading = !this.loading;
  21. },
  22. },
  23. };
  24. </script>

Card卡片 - 图5

简洁卡片

只包含内容区域。

  1. <template>
  2. <a-card style="width: 300px">
  3. <p>Card content</p>
  4. <p>Card content</p>
  5. <p>Card content</p>
  6. </a-card>
  7. </template>

Card卡片 - 图6

无边框

在灰色背景上使用无边框的卡片

  1. <template>
  2. <div style="background:#ECECEC; padding:30px">
  3. <a-card title="Card title" :bordered="false" style="width: 300px">
  4. <p>Card content</p>
  5. <p>Card content</p>
  6. <p>Card content</p>
  7. </a-card>
  8. </div>
  9. </template>

Card卡片 - 图7

网格型内嵌卡片

一种常见的卡片内容区隔模式。

  1. <template>
  2. <a-card title="Card Title">
  3. <a-card-grid style="width:25%;text-align:center">
  4. Content
  5. </a-card-grid>
  6. <a-card-grid style="width:25%;text-align:center" :hoverable="false">
  7. Content
  8. </a-card-grid>
  9. <a-card-grid style="width:25%;text-align:center">
  10. Content
  11. </a-card-grid>
  12. <a-card-grid style="width:25%;text-align:center">
  13. Content
  14. </a-card-grid>
  15. <a-card-grid style="width:25%;text-align:center">
  16. Content
  17. </a-card-grid>
  18. <a-card-grid style="width:25%;text-align:center">
  19. Content
  20. </a-card-grid>
  21. <a-card-grid style="width:25%;text-align:center">
  22. Content
  23. </a-card-grid>
  24. <a-card-grid style="width:25%;text-align:center">
  25. Content
  26. </a-card-grid>
  27. </a-card>
  28. </template>

Card卡片 - 图8

内部卡片

可以放在普通卡片内部,展示多层级结构的信息

  1. <template>
  2. <a-card title="Card title">
  3. <p style="fontSize: 14px;color: rgba(0, 0, 0, 0.85); marginBottom: 16px;fontWeight: 500">
  4. Group title
  5. </p>
  6. <a-card title="Inner card title">
  7. <a slot="extra" href="#">More</a>
  8. Inner Card content
  9. </a-card>
  10. <a-card title="Inner card title" :style="{ marginTop: '16px' }">
  11. <a slot="extra" href="#">More</a>
  12. Inner Card content
  13. </a-card>
  14. </a-card>
  15. </template>

Card卡片 - 图9

支持更多内容配置

一种支持封面、头像、标题和描述信息的卡片。

  1. <template>
  2. <a-card hoverable style="width: 300px">
  3. <img
  4. slot="cover"
  5. alt="example"
  6. src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
  7. />
  8. <template slot="actions" class="ant-card-actions">
  9. <a-icon key="setting" type="setting" />
  10. <a-icon key="edit" type="edit" />
  11. <a-icon key="ellipsis" type="ellipsis" />
  12. </template>
  13. <a-card-meta title="Card title" description="This is the description">
  14. <a-avatar
  15. slot="avatar"
  16. src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
  17. />
  18. </a-card-meta>
  19. </a-card>
  20. </template>

Card卡片 - 图10

带页签的卡片

可承载更多内容

  1. <template>
  2. <div>
  3. <a-card
  4. style="width:100%"
  5. title="Card title"
  6. :tab-list="tabList"
  7. :active-tab-key="key"
  8. @tabChange="key => onTabChange(key, 'key')"
  9. >
  10. <span slot="customRender" slot-scope="item"> <a-icon type="home" />{{ item.key }} </span>
  11. <a slot="extra" href="#">More</a>
  12. {{ contentList[key] }}
  13. </a-card>
  14. <br /><br />
  15. <a-card
  16. style="width:100%"
  17. :tab-list="tabListNoTitle"
  18. :active-tab-key="noTitleKey"
  19. @tabChange="key => onTabChange(key, 'noTitleKey')"
  20. >
  21. <p v-if="noTitleKey === 'article'">
  22. article content
  23. </p>
  24. <p v-else-if="noTitleKey === 'app'">
  25. app content
  26. </p>
  27. <p v-else="noTitleKey === 'project'">
  28. project content
  29. </p>
  30. <a slot="tabBarExtraContent" href="#">More</a>
  31. </a-card>
  32. </div>
  33. </template>
  34. <script>
  35. export default {
  36. data() {
  37. return {
  38. tabList: [
  39. {
  40. key: 'tab1',
  41. // tab: 'tab1',
  42. scopedSlots: { tab: 'customRender' },
  43. },
  44. {
  45. key: 'tab2',
  46. tab: 'tab2',
  47. },
  48. ],
  49. contentList: {
  50. tab1: 'content1',
  51. tab2: 'content2',
  52. },
  53. tabListNoTitle: [
  54. {
  55. key: 'article',
  56. tab: 'article',
  57. },
  58. {
  59. key: 'app',
  60. tab: 'app',
  61. },
  62. {
  63. key: 'project',
  64. tab: 'project',
  65. },
  66. ],
  67. key: 'tab1',
  68. noTitleKey: 'app',
  69. };
  70. },
  71. methods: {
  72. onTabChange(key, type) {
  73. console.log(key, type);
  74. this[type] = key;
  75. },
  76. },
  77. };
  78. </script>

API

Card

参数说明类型默认值版本
actions卡片操作组,位置在卡片底部slots-
activeTabKey当前激活页签的 keystring-
headStyle自定义标题区域样式object-
bodyStyle内容区域自定义样式object-
bordered是否有边框booleantrue
cover卡片封面slot-
defaultActiveTabKey初始化选中页签的 key,如果没有设置 activeTabKeystring第一个页签
extra卡片右上角的操作区域string|slot-
hoverable鼠标移过时可浮起booleanfalse
loading当卡片内容还在加载中时,可以用 loading 展示一个占位booleanfalse
tabList页签标题列表, 可以通过 scopedSlots 属性自定义 tabArray<{key: string, tab: any, scopedSlots: {tab: ‘XXX’}}>-
tabBarExtraContenttab bar 上额外的元素slot1.5.0
sizecard 的尺寸default | smalldefault
title卡片标题string|slot-
type卡片类型,可设置为 inner 或 不设置string-

事件

事件名称说明回调参数版本
tabChange页签切换的回调(key) => void-

Card.Grid

Card.Meta

参数说明类型默认值版本
avatar头像/图标slot-
description描述内容string|slot-
title标题内容string|slot-