Card 卡片

AuCard 是内容容器组件，提供材质表面、圆角、可选边框/阴影和内边距。

基础用法

工作区与显示

这是一个空卡片，内容完全由默认插槽提供。

<template>
  <div class="card-demo">
    <AuCard>
      <h3>工作区与显示</h3>
      <p>这是一个空卡片，内容完全由默认插槽提供。</p>
    </AuCard>
  </div>
</template>
<script setup>
import { AuCard } from 'aurora-plus';
</script>
<style scoped>
.card-demo {
  width: min(420px, 100%);
  margin: 0 auto;
}
.card-demo h3 {
  margin: 0 0 8px;
}
.card-demo p {
  margin: 0;
  color: var(--au-color-text-secondary);
}
</style>

类型

default

白卡 + 细边框 + 轻阴影，轮廓清晰。

flat

纯白表面，无边框无阴影。

elevated

细边框配更明显的阴影，从背景中浮起。

subtle

浅灰表面，无边框无阴影，适合次级分组。

<template>
  <div class="card-demo">
    <div class="card-demo__group">
      <AuCard type="default">
        <h3>default</h3>
        <p>白卡 + 细边框 + 轻阴影，轮廓清晰。</p>
      </AuCard>
      <AuCard type="flat">
        <h3>flat</h3>
        <p>纯白表面，无边框无阴影。</p>
      </AuCard>
      <AuCard type="elevated">
        <h3>elevated</h3>
        <p>细边框配更明显的阴影，从背景中浮起。</p>
      </AuCard>
      <AuCard type="subtle">
        <h3>subtle</h3>
        <p>浅灰表面，无边框无阴影，适合次级分组。</p>
      </AuCard>
    </div>
  </div>
</template>
<script setup>
import { AuCard } from 'aurora-plus';
</script>
<style scoped>
.card-demo {
  width: min(560px, 100%);
  margin: 0 auto;
}
.card-demo__group {
  display: grid;
  gap: 12px;
}
.card-demo h3 {
  margin: 0 0 6px;
  font-size: var(--au-font-size-base);
}
.card-demo p {
  margin: 0;
  color: var(--au-color-text-secondary);
  font-size: var(--au-font-size-small);
  line-height: 1.6;
}
</style>

可交互卡片

使用 hoverable 开启轻微悬停抬升。操作型卡片可通过 tag="button" 使用按钮元素。

<script setup>
import { ref } from 'vue';
import { AuCard } from 'aurora-plus';
const selected = ref(false);
</script>
<template>
  <AuCard tag="button" type="default" padding="compact" hoverable class="card-interactive-example" @click="selected = !selected">
    {{ selected ? '已选择，点击取消' : '悬停抬升，点击选择' }}
  </AuCard>
</template>
<style scoped>
.card-interactive-example { width: min(320px, 100%); font: inherit; text-align: left; cursor: pointer; }
</style>

Card API

Attributes

属性	说明	类型	默认值
tag	根元素或动态组件	string / Component	div
type	卡片类型，可选 default / flat / elevated / subtle	string	default
padding	内容留白，可选 none / compact / default / comfortable	string	default
hoverable	开启悬停抬升	boolean	false

Slots

插槽名	说明
default	卡片内容