Card 卡片

通用卡片容器。

何时使用

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

典型卡片

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

vue

<template>
  <g-card title="Card title" style="width: 300px">
    <template #extra><a href="#">More</a></template>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </g-card>
</template>

无边框

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

vue

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

简洁卡片

只包含内容区域。

vue

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

更灵活的内容展示

可以调整默认边距，设定宽度。

vue

<template>
  <g-card title="Card title" :body-style="{ padding: '24px' }" style="width: 300px">
    <template #extra><a href="#">More</a></template>
    <p>Card content</p>
    <p>Card content</p>
    <p>Card content</p>
  </g-card>
</template>

栅格卡片

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

vue

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

预加载的卡片

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

vue

<template>
  <div>
    <g-switch v-model:checked="loading" />
    <g-card style="width: 300px; margin-top: 16px" :loading="loading">
      <template #actions>
        <g-icon key="setting" type="setting" />
        <g-icon key="edit" type="edit" />
        <g-icon key="ellipsis" type="ellipsis" />
      </template>
      <g-card-meta
        title="Card title"
        description="This is the description"
      >
        <template #avatar>
          <g-avatar src="https://joeschmoe.io/api/v1/random" />
        </template>
      </g-card-meta>
    </g-card>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const loading = ref(true)
    
    return {
      loading
    }
  }
}
</script>

带页签的卡片

可承载更多内容。

vue

<template>
  <div>
    <g-card
      style="width: 100%"
      title="Card title"
      :tab-list="tabList"
      :active-tab-key="key"
      @tabChange="onTabChange"
    >
      <span v-if="key === 'tab1'">content1</span>
      <span v-else-if="key === 'tab2'">content2</span>
      <span v-else>no-title</span>
    </g-card>
    <br /><br />
    <g-card
      style="width: 100%"
      :tab-list="tabListNoTitle"
      :active-tab-key="noTitleKey"
      @tabChange="onTabChange2"
    >
      <p v-if="noTitleKey === 'article'">article content</p>
      <p v-else-if="noTitleKey === 'app'">app content</p>
      <p v-else>project content</p>
    </g-card>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const tabList = [
      {
        key: 'tab1',
        tab: 'tab1',
      },
      {
        key: 'tab2',
        tab: 'tab2',
      },
    ]
    
    const tabListNoTitle = [
      {
        key: 'article',
        tab: 'article',
      },
      {
        key: 'app',
        tab: 'app',
      },
      {
        key: 'project',
        tab: 'project',
      },
    ]
    
    const key = ref('tab1')
    const noTitleKey = ref('app')
    
    const onTabChange = (value) => {
      console.log(value)
      key.value = value
    }
    
    const onTabChange2 = (value) => {
      console.log(value)
      noTitleKey.value = value
    }
    
    return {
      tabList,
      tabListNoTitle,
      key,
      noTitleKey,
      onTabChange,
      onTabChange2
    }
  }
}
</script>

内部卡片

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

vue

<template>
  <g-card title="Card title">
    <g-card
      type="inner"
      title="Inner Card title"
      :extra="extra"
    >
      Inner Card content
    </g-card>
    <g-card
      style="margin-top: 16px"
      type="inner"
      title="Inner Card title"
      :extra="extra"
    >
      Inner Card content
    </g-card>
  </g-card>
</template>

<script>
import { h } from 'vue'

export default {
  setup() {
    const extra = h('a', { href: '#' }, 'More')
    
    return {
      extra
    }
  }
}
</script>

支持更多内容配置

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

vue

<template>
  <g-card
    hoverable
    style="width: 240px"
    cover="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
  >
    <template #actions>
      <g-icon key="setting" type="setting" />
      <g-icon key="edit" type="edit" />
      <g-icon key="ellipsis" type="ellipsis" />
    </template>
    <g-card-meta title="Europe Street beat" description="www.instagram.com">
      <template #avatar>
        <g-avatar src="https://joeschmoe.io/api/v1/random" />
      </template>
    </g-card-meta>
  </g-card>
</template>

网格型内嵌卡片

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

vue

<template>
  <g-card title="Card Title">
    <div class="card-container">
      <div class="card-item">
        <p>content1</p>
      </div>
      <div class="card-item">
        <p>content2</p>
      </div>
      <div class="card-item">
        <p>content3</p>
      </div>
      <div class="card-item">
        <p>content4</p>
      </div>
      <div class="card-item">
        <p>content5</p>
      </div>
      <div class="card-item">
        <p>content6</p>
      </div>
      <div class="card-item">
        <p>content7</p>
      </div>
    </div>
  </g-card>
</template>

<style>
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.card-item {
  text-align: center;
  color: rgba(0, 0, 0, 0.85);
  background: #fafafa;
  border-radius: 4px;
  min-height: 30px;
  line-height: 30px;
}
</style>

API

Card

参数	说明	类型	默认值
actions	卡片操作组，位置在卡片底部	slots	-
activeTabKey	当前激活页签的 key	string	-
bodyStyle	内容区域自定义样式	object	-
bordered	是否有边框	boolean	true
cover	卡片封面	string \| slot	-
defaultActiveTabKey	初始化选中页签的 key，如果没有设置 activeTabKey	string	第一个页签
extra	卡片右上角的操作区域	string \| slot	-
headStyle	自定义标题区域样式	object	-
hoverable	鼠标移过时可浮起	boolean	false
loading	当卡片内容还在加载中时，可以用 loading 展示一个占位	boolean	false
size	card 的尺寸	`default` \| `small`	`default`
tabBarExtraContent	tab bar 上额外的元素	slot	-
tabList	页签标题列表	Array<{key: string, tab: any}>	-
tabProps	Tabs	-	-
title	卡片标题	string \| slot	-
type	卡片类型，可设置为 `inner` 或不设置	string	-

Card 事件

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

Card.Grid

参数	说明	类型	默认值
class	网格容器类名	string	-
hoverable	鼠标移过时可浮起	boolean	true
style	定义网格容器类名的样式	object	-

Card.Meta

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

Card 卡片 ​

何时使用 ​

典型卡片 ​

无边框 ​

简洁卡片 ​

更灵活的内容展示 ​

栅格卡片 ​

预加载的卡片 ​

带页签的卡片 ​

内部卡片 ​

支持更多内容配置 ​

网格型内嵌卡片 ​

API ​

Card ​

Card 事件 ​

Card.Grid ​

Card.Meta ​