mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-06 16:21:09 +08:00
f389e3e6dd
Backend:
- Fix readLegacyFiles to handle { name, prefix }[] role format
- Add roles backfill in getEffectiveTeamMeta when meta.json exists
- Ensure pipeline_stages and roles flow correctly to API response
Team Skills:
- Add pipeline metadata initialization to all 16 team skill coordinator roles
- Each skill now reports pipeline_stages and roles to meta.json at session init
Documentation:
- Update command references and component documentation
- Add numerical-analysis-workflow skill spec
- Sync zh/en translations for commands and components
108 lines
2.4 KiB
Markdown
108 lines
2.4 KiB
Markdown
---
|
|
title: Card
|
|
description: Container component for grouping related content
|
|
sidebar: auto
|
|
---
|
|
|
|
# Card
|
|
|
|
## Overview
|
|
|
|
The Card component is a versatile container used to group related content and actions. It consists of several sub-components that work together to create a cohesive card layout.
|
|
|
|
## Live Demo
|
|
|
|
:::demo card-variants
|
|
Shows different card layouts including header, content, footer, and gradient border variants
|
|
:::
|
|
|
|
## Components
|
|
|
|
The Card component includes the following sub-components:
|
|
|
|
| Component | Purpose |
|
|
|-----------|---------|
|
|
| `Card` | Main container with border and background |
|
|
| `CardHeader` | Header section with padding |
|
|
| `CardTitle` | Title heading element |
|
|
| `CardDescription` | Descriptive text with muted color |
|
|
| `CardContent` | Content area with top padding |
|
|
| `CardFooter` | Footer section for actions |
|
|
| `CardGradientBorder` | Card with gradient border |
|
|
|
|
## Props
|
|
|
|
All Card components accept standard HTML div attributes:
|
|
|
|
| Component | Props |
|
|
|-----------|-------|
|
|
| `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` |
|
|
|
|
## Usage Examples
|
|
|
|
### Basic Card
|
|
|
|
```vue
|
|
<Card>
|
|
<CardContent>
|
|
<p>This is a basic card with content.</p>
|
|
</CardContent>
|
|
</Card>
|
|
```
|
|
|
|
### Card with Header
|
|
|
|
```vue
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Card Title</CardTitle>
|
|
<CardDescription>Card description goes here</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>Card content goes here.</p>
|
|
</CardContent>
|
|
</Card>
|
|
```
|
|
|
|
### Complete Card with Footer
|
|
|
|
```vue
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Project Settings</CardTitle>
|
|
<CardDescription>Manage your project configuration</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>Configure your project settings and preferences.</p>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button>Save Changes</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
```
|
|
|
|
### Card with Gradient Border
|
|
|
|
```vue
|
|
<CardGradientBorder>
|
|
<CardHeader>
|
|
<CardTitle>Featured Card</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p>This card has a gradient border effect.</p>
|
|
</CardContent>
|
|
</CardGradientBorder>
|
|
```
|
|
|
|
## Related Components
|
|
|
|
- [Button](/components/ui/button)
|
|
- [Badge](/components/ui/badge)
|
|
- Separator
|