Card 卡片

内容容器，支持标题、封面、操作区、可关闭、区域分割线。参考 Naive UI 设计（MIT 许可）。

基础用法

卡片标题

卡片内容。Aether UI 提供灵活的卡片组件，支持多种插槽和自定义。

底部信息 — 2026 年 5 月

<ACard title="卡片标题">
  <template #header-extra>
    <AButton size="small" text>详情</AButton>
  </template>
  <p>卡片内容</p>
  <template #footer>底部信息</template>
</ACard>

封面

山水之间

一张关于自然的卡片，封面撑满顶部。

<ACard title="山水之间">
  <template #cover>
    <img src="..." alt="cover" />
  </template>
  <p>一张关于自然的卡片</p>
</ACard>

尺寸

Small

紧凑的卡片布局

Medium

中等间距（默认）

Large

宽松的卡片布局

<ACard title="Small" size="small">...</ACard>
<ACard title="Medium" size="medium">...</ACard>
<ACard title="Large" size="large">...</ACard>

悬浮效果

悬停查看

鼠标移上卡片可看到阴影变化。

<ACard title="悬停查看" hoverable>
  <p>鼠标移上卡片可看到阴影变化</p>
</ACard>

区域分割线 (segmented)

通过 segmented 属性在内容区、底部、操作区之间添加分割线。

全部分割

内容区域

底部区域

仅底部

内容区域，无顶部分割线。

底部区域，有分割线。

<ACard title="标题" segmented>
  <p>内容</p>
  <template #footer>底部</template>
  <template #action>
    <AButton size="small" type="primary">确认</AButton>
  </template>
</ACard>

可关闭

可关闭

点击右上角 ✕ 触发关闭回调。

<ACard title="可关闭" closable @close="handleClose">
  <p>点击右上角关闭按钮</p>
</ACard>

嵌入式

嵌入式

嵌入背景的卡片，适合灰色容器内使用。

<ACard title="嵌入式" embedded>
  <p>嵌入背景色的卡片</p>
</ACard>

API

属性	类型	默认值	说明
title	string	—	卡片标题
size	'small' | 'medium' | 'large'	'medium'	卡片尺寸
bordered	boolean	true	显示边框
hoverable	boolean	false	悬浮阴影效果
embedded	boolean	false	嵌入模式（浅灰背景）
closable	boolean	false	显示关闭按钮
segmented	boolean | CardSegmented	false	区域分割线
tag	string	'div'	渲染的 HTML 标签
onClose	() => void	—	关闭回调

CardSegmented

interface CardSegmented {
  content?: boolean | 'soft'  // 内容区分割线
  footer?: boolean | 'soft'   // 底部分割线
  action?: boolean | 'soft'   // 操作区分割线
}

Slots

名称	说明
default	卡片主要内容
cover	封面图片区域
header	自定义头部（覆盖 title）
header-extra	头部右侧附加区域
footer	底部区域
action	操作栏（卡片最下方）