Card 卡片

通用容器，将信息聚合展示，支持折叠、加载状态、封面图和多种阴影效果。

基础用法

卡片标题

更多

这里是卡片内容区域，可以放置任意内容。

第二段内容。

卡片底部信息

包含标题、内容、底部区域的基础卡片

vue

<script setup lang="ts">
import { ACard } from '@lite-code/aui-vue'
</script>

<template>
  <ACard title="卡片标题" extra="更多">
    <p style="margin: 0; color: inherit;">这里是卡片内容区域，可以放置任意内容。</p>
    <p style="margin: 8px 0 0; color: inherit;">第二段内容。</p>
    <template #footer>
      卡片底部信息
    </template>
  </ACard>
</template>

阴影效果

始终显示阴影

shadow="always"

悬停显示阴影

shadow="hover"，鼠标悬停时出现阴影

无阴影

shadow="never"（默认）

支持 always（始终）、hover（悬停）、never（无）三种阴影模式

vue

<script setup lang="ts">
import { ACard } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
    <ACard title="始终显示阴影" shadow="always">
      <p style="margin: 0; color: inherit;">shadow="always"</p>
    </ACard>
    <ACard title="悬停显示阴影" shadow="hover">
      <p style="margin: 0; color: inherit;">shadow="hover"，鼠标悬停时出现阴影</p>
    </ACard>
    <ACard title="无阴影" shadow="never">
      <p style="margin: 0; color: inherit;">shadow="never"（默认）</p>
    </ACard>
  </div>
</template>

可折叠

可折叠卡片（默认展开）

点击标题栏即可折叠或展开此内容区域。

默认折叠

这段内容默认处于折叠状态，点击标题展开。

设置 collapsible 后点击标题栏可折叠内容区域

vue

<script setup lang="ts">
import { ACard } from '@lite-code/aui-vue'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <ACard title="可折叠卡片（默认展开）" collapsible>
      <p style="margin: 0; color: inherit;">点击标题栏即可折叠或展开此内容区域。</p>
    </ACard>
    <ACard title="默认折叠" collapsible :default-collapsed="true">
      <p style="margin: 0; color: inherit;">这段内容默认处于折叠状态，点击标题展开。</p>
    </ACard>
  </div>
</template>

加载状态

加载中

设置 loading 后显示骨架屏动画

vue

<script setup lang="ts">
import { ref } from 'vue'
import { ACard, AButton } from '@lite-code/aui-vue'

const loading = ref(true)

function toggle() {
  loading.value = !loading.value
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <ACard title="加载中" :loading="loading">
      <p style="margin: 0; color: inherit;">内容已加载完成。</p>
    </ACard>
    <AButton @click="toggle">
      {{ loading ? '停止加载' : '重新加载' }}
    </AButton>
  </div>
</template>

流光效果

设置 shimmer 启用流光动画，一道光带沿卡片边框持续旋转划过，常用于突出展示或营销场景。搭配深色背景效果更佳。

AI 分析结果

查看详情

流光效果会沿卡片边框循环运行，适合用于高亮 AI 生成内容或正在处理中的卡片。

正在生成…

预计剩余 3 秒

shimmer 开关演示：

动态切换流光

当前状态：shimmer=true

shimmer 流光效果

vue

<script setup lang="ts">
import { ref } from "vue";
import { ACard } from "@lite-code/aui-vue";

const on = ref(true);
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 24px">
    <!-- 基础流光 -->
    <ACard title="AI 分析结果" extra="查看详情" :shimmer="true">
      <p style="margin: 0; color: inherit">
        流光效果会沿卡片边框循环运行，适合用于高亮 AI
        生成内容或正在处理中的卡片。
      </p>
    </ACard>

    <!-- 无标题纯内容卡片 -->
    <ACard :shimmer="true" style="max-width: 320px">
      <div style="display: flex; align-items: center; gap: 12px">
        <div
          style="
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #6366f1, #36cfc9);
            flex-shrink: 0;
          "
        />
        <div>
          <div style="font-weight: 600; color: inherit">正在生成…</div>
          <div
            style="
              font-size: 12px;
              color: var(--aui-text-3, #8b8b8f);
              margin-top: 2px;
            "
          >
            预计剩余 3 秒
          </div>
        </div>
      </div>
    </ACard>

    <!-- 动态开关 -->
    <div>
      <div
        style="
          margin-bottom: 12px;
          display: flex;
          align-items: center;
          gap: 10px;
        "
      >
        <span style="font-size: 13px; color: var(--aui-text-3, #8b8b8f)"
          >shimmer 开关演示：</span
        >
        <button
          style="
            padding: 4px 14px;
            border-radius: 6px;
            border: 1px solid var(--aui-border, #e2e2e3);
            background: var(--aui-bg, #fff);
            cursor: pointer;
            font-size: 13px;
          "
          @click="on = !on"
        >
          {{ on ? "关闭" : "开启" }}
        </button>
      </div>
      <ACard title="动态切换流光" :shimmer="on">
        <p style="margin: 0; color: inherit">当前状态：shimmer={{ on }}</p>
      </ACard>
    </div>
  </div>
</template>

API

Props

属性	类型	默认值	说明
title	string	—	卡片标题
extra	string	—	头部右侧额外内容
shadow	CardShadow	'never'	阴影模式：always | hover | never
size	CardSize	'md'	尺寸：sm | md | lg
bordered	boolean	true	是否显示边框
loading	boolean	false	是否显示加载骨架屏
collapsible	boolean	false	是否可折叠
defaultCollapsed	boolean	false	默认折叠状态（非受控）
collapsed	boolean	—	折叠状态（受控）
onCollapseChange	(collapsed: boolean) => void	—	折叠状态变化回调
shimmer	boolean	false	启用流光动画效果
className	string	—	自定义 class
style	object	—	自定义样式
bodyStyle	object	—	内容区自定义样式

Slots

插槽	说明
default	卡片内容区域
title	自定义标题（覆盖 title prop）
extra	自定义头部右侧内容
cover	封面图区域
footer	底部区域

类型

type CardSize   = 'sm' | 'md' | 'lg'
type CardShadow = 'always' | 'hover' | 'never'