Card.tsx

基本信息

• 类型: React 组件 (shadcn/ui)
• 路径: ./src/components/ui/card.tsx

功能描述

卡片容器组件，用于组织相关内容。包含头部、内容区、底部等子组件，支持自定义操作区域。

导出内容

• Card - 卡片容器
• CardHeader - 卡片头部
• CardFooter - 卡片底部
• CardTitle - 卡片标题
• CardAction - 卡片操作按钮区域
• CardDescription - 卡片描述
• CardContent - 卡片内容区

Props 接口

Card

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<'div'>	否	-	div原生属性

CardHeader

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<'div'>	否	-	div原生属性

CardTitle / CardDescription / CardContent / CardFooter / CardAction

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<'div'>	否	-	div原生属性

依赖

• @/lib/utils - 工具函数 (cn)

使用示例

import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  CardAction,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";

<Card>
  <CardHeader>
    <CardTitle>账户信息</CardTitle>
    <CardDescription>管理您的个人账户设置</CardDescription>
    <CardAction>
      <Button size="sm">编辑</Button>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p>这里是卡片的主要内容区域。</p>
  </CardContent>
  <CardFooter className="flex justify-between">
    <Button variant="ghost">取消</Button>
    <Button>保存</Button>
  </CardFooter>
</Card>