Vue

Card

Introduction

The Card component is a container for displaying related content on pages, typically containing titles, descriptions, and optional images. The component features a clean and elegant design with smooth animation effects and interactive feedback, perfect for showcasing products, articles, or feature introductions.

Component features:

Supports image display with automatic size adaptation
Can be set as clickable link cards
Provides compact mode for different space requirements
Smooth hover animation effects
Responsive design, adapts to different screen sizes

Example

默认模式

compact=false，使用默认内边距

默认内边距的卡片内容

<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="默认模式" subtitle="compact=false，使用默认内边距" :compact="false">
            默认内边距的卡片内容
        </Card>
    </div>
</template>

Props

class

Custom CSS class that can be used to override default styles.

自定义样式

使用 class 属性自定义样式

自定义样式的卡片

<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="自定义样式" subtitle="使用 class 属性自定义样式"
            class="cosy:bg-gradient-to-r cosy:from-blue-500 cosy:to-purple-600 cosy:text-white">
            自定义样式的卡片
        </Card>
    </div>
</template>

compact

Whether to use compact mode.

紧凑模式

compact=true，使用紧凑内边距

紧凑内边距的卡片内容

默认模式

compact=false，使用默认内边距

默认内边距的卡片内容

<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="紧凑模式" subtitle="compact=true，使用紧凑内边距" :compact="true">
            紧凑内边距的卡片内容
        </Card>
    </div>
</template>

紧凑模式

compact=true，使用紧凑内边距

紧凑内边距的卡片内容

默认模式

compact=false，使用默认内边距

默认内边距的卡片内容

<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="默认模式" subtitle="compact=false，使用默认内边距" :compact="false">
            默认内边距的卡片内容
        </Card>
    </div>
</template>

href

If provided, the card will become a clickable link.

可点击卡片

使用 href 属性使卡片变成链接

点击此卡片可跳转

<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="可点击卡片" subtitle="使用 href 属性使卡片变成链接" href="#">
            点击此卡片可跳转
        </Card>
    </div>
</template>

imageUrl

URL of the image displayed at the top of the card.

带图片的卡片

使用 imageUrl 属性添加顶部图片

包含图片的卡片内容

<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="带图片的卡片" subtitle="使用 imageUrl 属性添加顶部图片" imageUrl="/cosy-ui/sample-1.png">
            包含图片的卡片内容
        </Card>
    </div>
</template>

subtitle

Card subtitle or description.

带副标题的卡片

这是一个详细的副标题描述，用于说明卡片的主要内容

卡片内容区域

<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="带副标题的卡片" subtitle="这是一个详细的副标题描述，用于说明卡片的主要内容">
            卡片内容区域
        </Card>
    </div>
</template>

title

Card title (required).

默认模式

compact=false，使用默认内边距

默认内边距的卡片内容

<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="默认模式" subtitle="compact=false，使用默认内边距" :compact="false">
            默认内边距的卡片内容
        </Card>
    </div>
</template>

Slots

default

Card content slot, used to place additional content below the subtitle.

带内容的卡片

使用默认插槽添加额外内容

<script setup lang="ts">
import { Card } from '@coffic/cosy-ui/vue';
</script>

<template>
    <div style="display: flex; justify-content: center; padding: 1rem;">
        <Card title="带内容的卡片" subtitle="使用默认插槽添加额外内容">
            <div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
                <button
                    style="background-color: #3b82f6; color: white; padding: 0.25rem 0.75rem; border-radius: 0.375rem; border: none; font-size: 0.875rem;">
                    操作按钮
                </button>
                <button
                    style="background-color: #6b7280; color: white; padding: 0.25rem 0.75rem; border-radius: 0.375rem; border: none; font-size: 0.875rem;">
                    取消
                </button>
            </div>
        </Card>
    </div>
</template>