@ug666/react 文档演示

Card 卡片

Card 提供稳定的信息承载结构，适合用于概览信息、营销模块与表单面板。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@ug666/react'

变体预览

基础信息卡片与带标签的强调卡片。

团队项目

当前共有 12 个活跃项目正在同步。

上次更新时间：2 分钟前

AI 加速包

状态展示

用于表达升级、支付或完成状态。

支付方式

默认账单卡片

Visa 尾号 2048

已绑定

归档项目

只读状态，不允许继续编辑。

项目已于 2026-04-01 冻结。

尺寸展示

通过容器宽度与内边距适配摘要卡与详情卡。

紧凑摘要卡

适合仪表盘小卡片

宽版详情卡

适合承载更多说明、统计图和表单操作。

代码示例

卡片推荐通过组合子组件构建结构，而不是单一 props 配置。

import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@ug666/react'

export function BillingCard() {
  return (
    <Card className="max-w-md">
      <CardHeader>
        <CardTitle>升级专业版</CardTitle>
        <CardDescription>解锁团队协作、审计日志与高级主题能力。</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-text-secondary">首年价格 ¥299 / 用户。</p>
      </CardContent>
      <CardFooter className="justify-end gap-2">
        <Button variant="outline">稍后再说</Button>
        <Button>立即升级</Button>
      </CardFooter>
    </Card>
  )
}

Props 说明

属性	类型	默认值	说明
className	string	—	Card 与其子组件都支持自定义布局与外观。
children	ReactNode	—	通过组合 Header / Content / Footer 构建结构。