开发预览更新于 2026-05-10

Card 卡片

卡片容器 —— 3 种 variant、可交互整卡、Header / Body / Footer 三段式结构。

基础用法

最简的 Card 只渲染默认插槽（Vue）/ children（React），用于包裹一段内容并加边框。

背景

最简卡片，只渲染默认插槽。适合放一段说明文字或简单数据块。

<script setup lang="ts">
import { CfCard } from '@chufix-design/vue';
</script>

<template>
  <CfCard style="max-width: 22rem;">
    <p style="margin: 0;">最简卡片，只渲染默认插槽。适合放一段说明文字或简单数据块。</p>
  </CfCard>
</template>

import { CfCard } from '@chufix-design/react';

export default function Demo() {
return (
  <CfCard>
    <p>最简卡片，只渲染 children。</p>
  </CfCard>
);
}

视觉变体

3 种 variant 在不同信息层级使用：outlined（默认描边）/ elevated（带阴影）/ filled（浅灰填充）。

背景

outlined

默认描边卡片

elevated

带阴影抬升

filled

浅灰填充背景

<script setup lang="ts">
import { CfCard } from '@chufix-design/vue';
</script>

<template>
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; width: 100%;">
    <CfCard variant="outlined">
      <strong>outlined</strong>
      <p class="demo-hint" style="margin: 0.4rem 0 0;">默认描边卡片</p>
    </CfCard>
    <CfCard variant="elevated">
      <strong>elevated</strong>
      <p class="demo-hint" style="margin: 0.4rem 0 0;">带阴影抬升</p>
    </CfCard>
    <CfCard variant="filled">
      <strong>filled</strong>
      <p class="demo-hint" style="margin: 0.4rem 0 0;">浅灰填充背景</p>
    </CfCard>
  </div>
</template>

<CfCard variant="outlined">…</CfCard>
<CfCard variant="elevated">…</CfCard>
<CfCard variant="filled">…</CfCard>

三段式结构

Vue 用具名插槽 header / footer，React 用子组件 CardHeader / CardBody / CardFooter。任意一段都可省略。

背景

这是一段卡片正文，介绍当前项目的基本信息。

上次更新：2026-05-08

<script setup lang="ts">
import { CfButton, CfCard } from '@chufix-design/vue';
</script>

<template>
  <CfCard variant="elevated" style="max-width: 22rem;">
    <template #header>项目设置</template>
    <p style="margin: 0;">这是一段卡片正文，介绍当前项目的基本信息。</p>
    <p style="margin: 0.6rem 0 0; color: var(--fg-2); font-size: 0.85rem;">
      上次更新：2026-05-08
    </p>
    <template #footer>
      <CfButton size="sm" variant="tertiary">取消</CfButton>
      <CfButton size="sm">保存</CfButton>
    </template>
  </CfCard>
</template>

import { CfButton, CfCard, CfCardHeader, CfCardBody, CfCardFooter } from '@chufix-design/react';

export default function Demo() {
return (
  <CfCard variant="elevated">
    <CfCardHeader>项目设置</CfCardHeader>
    <CfCardBody>
      <p>这是一段卡片正文。</p>
    </CfCardBody>
    <CfCardFooter>
      <CfButton size="sm" variant="tertiary">取消</CfButton>
      <CfButton size="sm">保存</CfButton>
    </CfCardFooter>
  </CfCard>
);
}

整卡可点击

打开 interactive 后，整张卡片变成按钮 —— 自动加 role="button" + tabindex="0"，键盘 Enter 可触发 click。

背景

把 interactive 打开后，整张卡片成为按钮。键盘 Enter 也可触发。

<script setup lang="ts">
import { ref } from 'vue';
import { CfCard } from '@chufix-design/vue';

const clicked = ref(0);
</script>

<template>
  <CfCard
    variant="outlined"
    interactive
    style="max-width: 22rem;"
    @click="clicked++"
  >
    <template #header>整卡可点击</template>
    <p style="margin: 0;">把 <code>interactive</code> 打开后，整张卡片成为按钮。键盘 Enter 也可触发。</p>
    <template #footer>
      已点击 <strong>{{ clicked }}</strong> 次
    </template>
  </CfCard>
</template>

<CfCard variant="outlined" interactive onClick={() => setClicked(c => c + 1)}>
<CfCardHeader>整卡可点击</CfCardHeader>
<CfCardBody>已点击 {clicked} 次</CfCardBody>
</CfCard>

API

Prop	类型	默认值	说明
`variant`	`'outlined' \| 'elevated' \| 'filled'`	`'outlined'`	视觉变体
`interactive`	`boolean`	`false`	整卡变成按钮（focus / hover）
`as`	`string`（Vue）	`'div'`	渲染的 HTML tag