Card 卡片

通用卡片容器

何时使用

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

代码演示

典型卡片

包含标题、内容、操作区域。

<template>
  <a-card title="Card Title">
    <a href="#" slot="extra">more</a>
    <p>card content</p>
    <p>card content</p>
    <p>card content</p>
  </a-card>
</template>

无边框

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

<template>
<div style="background:#ECECEC; padding:30px">
  <a-card title="Card title" :bordered="false" style="width: 300px">
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </a-card>
</div>
</template>

更灵活的内容展示

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

<template>
<a-card
  hoverable
  style="width: 240px"
>
  <img
    alt="example"
    src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
    slot="cover"
  />
  <a-card-meta
    title="Europe Street beat">
    <template slot="description">www.instagram.com</template>
  </a-card-meta>
</a-card>
</template>

网格型内嵌卡片

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

<template>
<a-card title="Card Title">
  <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
  <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
  <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
  <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
  <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
  <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
  <a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
</a-card>
</template>

栅格卡片

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

<template>
  <div style="background-color: #ececec; padding: 20px;">
    <a-row :gutter="16">
      <a-col :span="8">
        <a-card title="Card title" :bordered=false>
          <p>card content</p>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card title="Card title" :bordered=false>
          <p>card content</p>
        </a-card> 
      </a-col>
      <a-col :span="8">
        <a-card title="Card title" :bordered=false>
          <p>card content</p>
        </a-card>   
      </a-col>
    </a-row>
  </div>
</template>

内部卡片

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

<template>
  <a-card title="Card title">
    <p style="fontSize: 14px;color: rgba(0, 0, 0, 0.85); marginBottom: 16px;fontWeight: 500"
    >
      Group title
    </p>
    <a-card title="Inner card title">
      <a href="#" slot="extra">More</a>
      Inner Card content
    </a-card>
    <a-card title="Inner card title" :style="{ marginTop: '16px' }">
      <a href="#" slot="extra">More</a>
      Inner Card content
    </a-card>
  </a-card>
</template>

预加载的卡片

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

<template>
  <div>
    <a-card :loading="loading" title="Card title">
      whatever content
    </a-card>
    <a-button @click="handleClick" style="marginTop: 16px">Toggle loading</a-button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: true,
      }
    },
    methods: {
      handleClick() {
        this.loading = !this.loading
      }
    },
  }
</script>

支持更多内容配置

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

<template>
<a-card
  hoverable
  style="width: 300px"
>
  <img
    alt="example"
    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
    slot="cover"
  />
  <template class="ant-card-actions" slot="actions">
    <a-icon type="setting" />
    <a-icon type="edit" />
    <a-icon type="ellipsis" />
  </template>
  <a-card-meta
    title="Card title"
    description="This is the description">
    <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
  </a-card-meta>
</a-card>
</template>

简洁卡片

只包含内容区域。

<template>
  <a-card style="width: 300px">
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </a-card>
</template>

带页签的卡片

可承载更多内容

<template>
  <div>
    <a-card
      style="width:100%"
      title="Card title"
      :tabList="tabList"
      :activeTabKey="key"
      @tabChange="key => onTabChange(key, 'key')"
    >
      <span slot="customRender" slot-scope="item">
        <a-icon type="home"/>{{item.key}}
      </span>
      <a href="#" slot="extra">More</a>
      {{contentList[key]}}
    </a-card>
    <br /><br />
    <a-card
      style="width:100%"
      :tabList="tabListNoTitle"
      :activeTabKey="noTitleKey"
      @tabChange="key => onTabChange(key, 'noTitleKey')"
    >
      <p v-if="noTitleKey === 'article'">article content</p>
      <p v-else="noTitleKey === 'app'">app content</p>
      <p v-else="noTitleKey === 'project'">project content</p>
    </a-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tabList: [{
        key: 'tab1',
        // tab: 'tab1',
        scopedSlots: { tab: 'customRender'}
      }, {
        key: 'tab2',
        tab: 'tab2',
      }],
      contentList: {
        tab1: 'content1',
        tab2: 'content2',
      },
      tabListNoTitle: [{
        key: 'article',
        tab: 'article',
      }, {
        key: 'app',
        tab: 'app',
      }, {
        key: 'project',
        tab: 'project',
      }],
      key: 'tab1',
      noTitleKey: 'app',
    }
  },
  methods: {
    onTabChange (key, type) {
      console.log(key, type)
      this[type] = key
    },
  },
}
</script>

API

Card

事件

Card.Grid

Card.Meta