开发预览更新于 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>
  <p>最简卡片，只渲染默认插槽。</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

浅灰填充背景

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

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

三段式结构

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

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

上次更新：2026-05-08

<CfCard variant="elevated">
<template #header>项目设置</template>
<p>这是一段卡片正文。</p>
<template #footer>
  <CfButton size="sm" variant="tertiary">取消</CfButton>
  <CfButton size="sm">保存</CfButton>
</template>
</CfCard>

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 也可触发。

<CfCard variant="outlined" interactive @click="clicked++">
<template #header>整卡可点击</template>
<p>已点击 {{ clicked }} 次</p>
</CfCard>

<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