Card 卡片

通用内容容器，用于承载信息区块，支持 hover 阴影提升和可点击态。

基础用法

Airo 是一个基于 Vue 3 的开源 UI 组件库，专注于打磨「感觉」——流畅的弹性动画、克制的配色系统、干净的视觉层次。

<ACard>
  <p>Airo 是一个基于 Vue 3 的开源 UI 组件库...</p>
</ACard>

分段卡片

标题

卡片内容区域，位于 header 与 footer 之间。

更新于 2026 年 5 月

<ACard>
  <template #header>
    <h4>标题</h4>
  </template>
  <p>卡片内容</p>
  <template #footer>
    <span>更新于 2026 年 5 月</span>
  </template>
</ACard>

可点击

点击整张卡片触发交互，active 时 scale(0.99) 弹性回弹。

<ACard clickable @click="handleClick">
  <p>点击整张卡片触发交互...</p>
</ACard>

API

Props

名称	类型	默认值	说明
clickable	boolean	false	是否可点击（active 时 scale 回弹）
hoverable	boolean	true	悬浮时阴影层级提升

Slots

名称	说明
default	卡片主体内容
header	卡片头部
footer	卡片底部

交互特性

• hover 时 --shadow-sm → --shadow-md 平滑过渡
• clickable 状态 active 时 scale(0.99) spring 回弹