Card 卡片

承载一块相对独立的内容。

基础用法

基础卡片

用于承载标题、正文与操作区，适合中后台信息块。

封面卡片

悬停时显示阴影，可搭配本地示例图。

<script setup>
import { DanButton, DanCard, DanSpace } from '@dandan-ui/ui'
</script>

<template>
  <DanSpace wrap :size="16">
    <DanCard header="基础卡片" style="width: 280px">
      用于承载标题、正文与操作区，适合中后台信息块。
      <template #footer>
        <DanButton type="primary" size="small">查看</DanButton>
      </template>
    </DanCard>

    <DanCard shadow="hover" style="width: 280px">
      <template #cover>
        <img
          src="/images/city-rainbow.png"
          alt="城市彩虹"
          style="height: 140px; object-fit: cover"
        />
      </template>
      <template #header>封面卡片</template>
      悬停时显示阴影，可搭配本地示例图。
    </DanCard>
  </DanSpace>
</template>

Props

属性	说明	类型	默认值
header	标题文案	string	''
shadow	阴影时机	'always' | 'hover' | 'never'	'always'
bodyStyle	内容区样式	Record<string, string>	{}

Slots

插槽	说明
default	正文
header	自定义标题
cover	封面（通常放图片）
footer	底部操作区