卡片

基本使用

Default size card

more

card content

card content

card content

参考案例

<template>
  <Card title="Default size card" :width="300">
    <template #extra><a href="#">more</a></template>
    <p>card content</p>
    <p>card content</p>
    <p>card content</p>
  </Card>
</template>

小卡片

Small size card

more

card content

card content

card content

参考案例

<template>
    <Card size="small" title="Small size card" :width="300">
        <template #extra><a href="#">more</a></template>
        <p>card content</p>
        <p>card content</p>
        <p>card content</p>
    </Card>
</template>

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

Card title

Card content

Card content

Card content

参考案例

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

自定义标题和内容区域样式

Default size card

more

card content

card content

card content

参考案例

<template>
    <Card
    title="Default size card"
    :width="300"
    :headStyle="{ fontSize: '18px', color: '#fff', backgroundColor: '#52c41a' }"
    :bodyStyle="{ fontSize: '16px', color: '#fff', backgroundColor: '#faad14' }"
    >
        <template #extra><a href="#">more</a></template>
        <p>card content</p>
        <p>card content</p>
        <p>card content</p>
    </Card>
</template>

内部卡片

Card title

Group title

Inner card title

More

Inner Card content

Inner card title

More

Inner Card content

参考案例

<template>
    <Card title="Card title" :width="360">
        <p style="font-size: 14px; color: rgba(0, 0, 0, 0.85); margin-bottom: 16px; font-weight: 500;">
            Group title
        </p>
        <Card title="Inner card title">
            <template #extra>
            <a href="#">More</a>
            </template>
            Inner Card content
        </Card>
        <Card title="Inner card title" :style="{ marginTop: '16px' }">
            <template #extra>
            <a href="#">More</a>
            </template>
            Inner Card content
        </Card>
    </Card>
</template>