ChuFix UI v0.11.0
开发预览 更新于 2026-05-10

Card 卡片

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

基础用法

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

背景 视口

最简卡片，只渲染默认插槽。适合放一段说明文字或简单数据块。
src/App.vue 
<script setup lang="ts">
import { CfCard } from '@chufix-design/vue';
</script>
<template>
  <CfCard style="max-width: 22rem;">
    <p style="margin: 0;">最简卡片，只渲染默认插槽。适合放一段说明文字或简单数据块。</p>
  </CfCard>
</template>
<script setup>
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>
);
}
import { CfCard } from '@chufix-design/react';

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

视觉变体

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

背景 视口
outlined

默认描边卡片

elevated

带阴影抬升

filled

浅灰填充背景
src/App.vue 
<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>
<script setup>
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>
import { CfCard } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: "0.75rem", width: "100%" }}>
          <CfCard variant="outlined">
            <strong>outlined</strong>
            <p className="demo-hint" style={{ margin: "0.4rem 0 0" }}>默认描边卡片</p>
          </CfCard>
          <CfCard variant="elevated">
            <strong>elevated</strong>
            <p className="demo-hint" style={{ margin: "0.4rem 0 0" }}>带阴影抬升</p>
          </CfCard>
          <CfCard variant="filled">
            <strong>filled</strong>
            <p className="demo-hint" style={{ margin: "0.4rem 0 0" }}>浅灰填充背景</p>
          </CfCard>
        </div>
    </>
  );
}
import { CfCard } from '@chufix-design/react';

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

三段式结构

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

背景 视口
项目设置

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

上次更新：2026-05-08

src/App.vue 
<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>
<script setup>
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>
);
}
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 也可触发。

已点击 0 次
src/App.vue 
<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>
<script setup>
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>
import { useState } from 'react';
import { CfCard } from '@chufix-design/react';

export default function Demo() {
  const [clicked, setClicked] = useState(0);
  return (
    <>
      <CfCard variant="outlined" interactive style={{ maxWidth: "22rem" }} onClick={() => clicked++}
        >
          整卡可点击
    </>
  );
}
import { useState } from 'react';
import { CfCard } from '@chufix-design/react';

export default function Demo() {
  const [clicked, setClicked] = useState(0);
  return (
    <>
      <CfCard variant="outlined" interactive style={{ maxWidth: "22rem" }} onClick={() => clicked++}
        >
          整卡可点击
    </>
  );
}

API

Props

Prop类型默认值说明
variant'outlined' | 'elevated' | 'filled''outlined'视觉变体
interactivebooleanfalse整卡变成按钮（focus / hover）
asstring（Vue）'div'渲染的 HTML tag

Events

Vue 事件React 回调载荷类型说明
clickonClickMouseEvent卡片被点击时触发；interactive=true 时键盘 Enter 也会触发

Slots / Children

Slot说明
default卡片主体内容（React 端：children 或 <CfCardBody>）
header顶部段落（React 端：<CfCardHeader>），可省略
footer底部段落（React 端：<CfCardFooter>），可省略

反馈与讨论

Card 卡片 的讨论

0
0 / 600
正在加载评论...