mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-03-03 15:43:11 +08:00

Files

catlog22 99d6438303 feat: add documentation for Checkbox, Input, and Select components; enhance Queue and Terminal features

- Introduced Checkbox component documentation in Chinese, covering usage, properties, and examples.
- Added Input component documentation in Chinese, detailing its attributes and various states.
- Created Select component documentation in Chinese, including subcomponents and usage examples.
- Developed Queue management documentation, outlining its core functionalities and component structure.
- Added Terminal dashboard documentation, describing its layout, core features, and usage examples.
- Documented team workflows, detailing various team skills and their applications in project management.

2026-03-02 19:38:30 +08:00

2.4 KiB

Raw Blame History

title, description, sidebar

title	description	sidebar
Card 卡片	用于分组相关内容的容器组件	auto

Card 卡片

概述

卡片组件是一个通用的容器，用于分组相关的内容和操作。它由多个子组件组成，协同工作以创建连贯的卡片布局。

语法演示

:::demo card-variants 展示不同的卡片布局，包括页眉、内容、页脚和渐变边框变体 :::

组件

卡片组件包含以下子组件：

组件	用途
`Card`	带有边框和背景的主容器
`CardHeader`	带有内边距的页眉部分
`CardTitle`	标题元素
`CardDescription`	带有次要颜色的描述文本
`CardContent`	带有顶部内边距的内容区域
`CardFooter`	用于操作的页脚部分
`CardGradientBorder`	带有渐变边框的卡片

属性

所有 Card 组件接受标准 HTML div 属性：

组件	属性
`Card`	`className?: string`
`CardHeader`	`className?: string`
`CardTitle`	`className?: string`, `children?: ReactNode`
`CardDescription`	`className?: string`, `children?: ReactNode`
`CardContent`	`className?: string`
`CardFooter`	`className?: string`
`CardGradientBorder`	`className?: string`

使用示例

基础卡片

<Card>
  <CardContent>
    <p>这是一个带有内容的基础卡片。</p>
  </CardContent>
</Card>

带页眉的卡片

<Card>
  <CardHeader>
    <CardTitle>卡片标题</CardTitle>
    <CardDescription>卡片描述放在这里</CardDescription>
  </CardHeader>
  <CardContent>
    <p>卡片内容放在这里。</p>
  </CardContent>
</Card>

带页脚的完整卡片

<Card>
  <CardHeader>
    <CardTitle>项目设置</CardTitle>
    <CardDescription>管理您的项目配置</CardDescription>
  </CardHeader>
  <CardContent>
    <p>配置您的项目设置和偏好。</p>
  </CardContent>
  <CardFooter>
    <Button>保存更改</Button>
  </CardFooter>
</Card>

带渐变边框的卡片

<CardGradientBorder>
  <CardHeader>
    <CardTitle>特色卡片</CardTitle>
  </CardHeader>
  <CardContent>
    <p>此卡片具有渐变边框效果。</p>
  </CardContent>
</CardGradientBorder>

2.4 KiB Raw Blame History