logo
简体中文

导航菜单

文档
Vue

Card

简介

Card组件用于在页面中展示相关内容的容器，通常包含标题、描述和可选的图片。组件设计简洁大方，具有平滑的动画效果和交互反馈，适合展示产品、文章或功能介绍等内容。

组件特性：

  • 支持图片展示，自动适配尺寸
  • 可设置为可点击的链接卡片
  • 提供紧凑模式，适应不同空间需求
  • 平滑的悬停动画效果
  • 响应式设计，适配不同屏幕尺寸

案例

默认模式

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

自定义CSS类，可用于覆盖默认样式。

自定义样式

使用 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

是否使用紧凑模式。

紧凑模式

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

如果提供，卡片将变成可点击的链接。

<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。

带图片的卡片

带图片的卡片

使用 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

卡片副标题或描述。

带副标题的卡片

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

卡片内容区域 
<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

卡片标题（必填）。

默认模式

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

卡片内容插槽，用于在副标题下方放置额外内容。

带内容的卡片

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

 
<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>

搜索