mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-01 15:03:57 +08:00
feat: add queue management and terminal dashboard documentation in Chinese
- Introduced comprehensive documentation for the queue management feature, detailing its pain points, core functionalities, and component structure. - Added terminal dashboard documentation, highlighting its layout, core features, and usage examples. - Created an index page in Chinese for Claude Code Workflow, summarizing its purpose and core features, along with quick links to installation and guides.
This commit is contained in:
catlog22
119
docs/components/ui/badge.md
Normal file
119
docs/components/ui/badge.md
Normal file
@@ -0,0 +1,119 @@
|
||||
---
|
||||
title: Badge
|
||||
description: Small status or label component for visual categorization
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# Badge
|
||||
|
||||
## Overview
|
||||
|
||||
The Badge component is used to display status, categories, or labels in a compact form. It's commonly used for tags, status indicators, and counts.
|
||||
|
||||
## Live Demo
|
||||
|
||||
:::demo badge-variants
|
||||
Shows all available badge variants including default, secondary, destructive, outline, success, warning, info, review, and gradient
|
||||
:::
|
||||
|
||||
## Props
|
||||
|
||||
<PropsTable :props="[
|
||||
{ name: 'variant', type: '\'default\' | \'secondary\' | \'destructive\' | \'outline\' | \'success\' | \'warning\' | \'info\' | \'review\' | \'gradient\'', required: false, default: '\'default\'', description: 'Visual style variant' },
|
||||
{ name: 'className', type: 'string', required: false, default: '-', description: 'Custom CSS class name' },
|
||||
{ name: 'children', type: 'ReactNode', required: true, default: '-', description: 'Badge content' }
|
||||
]" />
|
||||
|
||||
## Variants
|
||||
|
||||
### Default
|
||||
|
||||
Primary badge with theme color background. Used for primary labels and categories.
|
||||
|
||||
### Secondary
|
||||
|
||||
Muted badge for secondary information.
|
||||
|
||||
### Destructive
|
||||
|
||||
Red badge for errors, danger states, or negative status.
|
||||
|
||||
### Outline
|
||||
|
||||
Badge with only text and border, no background. Used for subtle labels.
|
||||
|
||||
### Success
|
||||
|
||||
Green badge for success states, completed actions, or positive status.
|
||||
|
||||
### Warning
|
||||
|
||||
Yellow/amber badge for warnings, pending states, or caution indicators.
|
||||
|
||||
### Info
|
||||
|
||||
Blue badge for informational content or neutral status.
|
||||
|
||||
### Review
|
||||
|
||||
Purple badge for review status, pending review, or feedback indicators.
|
||||
|
||||
### Gradient
|
||||
|
||||
Badge with brand gradient background for featured or highlighted items.
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Badge
|
||||
|
||||
```vue
|
||||
<Badge>Default</Badge>
|
||||
```
|
||||
|
||||
### Status Indicators
|
||||
|
||||
```vue
|
||||
<Badge variant="success">Active</Badge>
|
||||
<Badge variant="warning">Pending</Badge>
|
||||
<Badge variant="destructive">Failed</Badge>
|
||||
<Badge variant="info">Draft</Badge>
|
||||
```
|
||||
|
||||
### Count Badge
|
||||
|
||||
```vue
|
||||
<div class="relative">
|
||||
<Bell />
|
||||
<Badge variant="destructive" class="absolute -top-2 -right-2 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs">
|
||||
3
|
||||
</Badge>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Category Tags
|
||||
|
||||
```vue
|
||||
<div class="flex gap-2">
|
||||
<Badge variant="outline">React</Badge>
|
||||
<Badge variant="outline">TypeScript</Badge>
|
||||
<Badge variant="outline">Tailwind</Badge>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Review Status
|
||||
|
||||
```vue
|
||||
<Badge variant="review">In Review</Badge>
|
||||
```
|
||||
|
||||
### Gradient Badge
|
||||
|
||||
```vue
|
||||
<Badge variant="gradient">Featured</Badge>
|
||||
```
|
||||
|
||||
## Related Components
|
||||
|
||||
- [Card](/components/ui/card)
|
||||
- [Button](/components/ui/button)
|
||||
- [Avatar](/components/ui/avatar)
|
||||
80
docs/components/ui/button.md
Normal file
80
docs/components/ui/button.md
Normal file
@@ -0,0 +1,80 @@
|
||||
---
|
||||
title: Button
|
||||
description: Button component for triggering actions or submitting forms
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# Button
|
||||
|
||||
## Overview
|
||||
|
||||
The Button component is one of the most commonly used interactive elements, used to trigger actions, submit forms, or navigate to other pages.
|
||||
|
||||
## Live Demo
|
||||
|
||||
:::demo button-variants
|
||||
Shows all visual variants of the button component
|
||||
:::
|
||||
|
||||
## Props
|
||||
|
||||
<PropsTable :props="[
|
||||
{ name: 'variant', type: '\'default\' | \'destructive\' | \'outline\' | \'secondary\' | \'ghost\' | \'link\' | \'gradient\' | \'gradientPrimary\'', required: false, default: '\'default\'', description: 'Visual style variant' },
|
||||
{ name: 'size', type: '\'default\' | \'sm\' | \'lg\' | \'icon\'', required: false, default: '\'default\'', description: 'Button size' },
|
||||
{ name: 'asChild', type: 'boolean', required: false, default: 'false', description: 'Whether to merge props with child element (for Radix UI composition)' },
|
||||
{ name: 'disabled', type: 'boolean', required: false, default: 'false', description: 'Whether the button is disabled' },
|
||||
{ name: 'onClick', type: '() => void', required: false, default: '-', description: 'Click event callback' },
|
||||
{ name: 'className', type: 'string', required: false, default: '-', description: 'Custom CSS class name' },
|
||||
{ name: 'children', type: 'ReactNode', required: true, default: '-', description: 'Button content' }
|
||||
]" />
|
||||
|
||||
## Variants
|
||||
|
||||
### Default
|
||||
|
||||
Default buttons are used for primary actions.
|
||||
|
||||
### Destructive
|
||||
|
||||
Destructive buttons are used for irreversible actions like delete or remove.
|
||||
|
||||
### Outline
|
||||
|
||||
Outline buttons are used for secondary actions with a lighter visual weight.
|
||||
|
||||
### Secondary
|
||||
|
||||
Secondary buttons are used for auxiliary actions.
|
||||
|
||||
### Ghost
|
||||
|
||||
Ghost buttons have no border and the lightest visual weight.
|
||||
|
||||
### Link
|
||||
|
||||
Link buttons look like links but have button interaction behavior.
|
||||
|
||||
### Gradient
|
||||
|
||||
Gradient buttons use the brand gradient with a glow effect on hover.
|
||||
|
||||
### Gradient Primary
|
||||
|
||||
Gradient Primary buttons use the primary theme gradient with an enhanced glow effect on hover.
|
||||
|
||||
## Usage Scenarios
|
||||
|
||||
| Scenario | Recommended Variant |
|
||||
|----------|---------------------|
|
||||
| Primary actions (submit, save) | default, gradientPrimary |
|
||||
| Dangerous actions (delete, remove) | destructive |
|
||||
| Secondary actions | outline, secondary |
|
||||
| Cancel actions | ghost, outline |
|
||||
| Navigation links | link |
|
||||
| Promotional/Featured CTAs | gradient |
|
||||
|
||||
## Related Components
|
||||
|
||||
- [Input](/components/ui/input)
|
||||
- [Select](/components/ui/select)
|
||||
- [Dialog](/components/ui/dialog)
|
||||
107
docs/components/ui/card.md
Normal file
107
docs/components/ui/card.md
Normal file
@@ -0,0 +1,107 @@
|
||||
---
|
||||
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](/components/ui/separator)
|
||||
120
docs/components/ui/checkbox.md
Normal file
120
docs/components/ui/checkbox.md
Normal file
@@ -0,0 +1,120 @@
|
||||
---
|
||||
title: Checkbox
|
||||
description: Checkbox component for binary choice selection
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# Checkbox
|
||||
|
||||
## Overview
|
||||
|
||||
The Checkbox component allows users to select one or more options from a set. Built on Radix UI Checkbox Primitive, it provides full accessibility support including keyboard navigation.
|
||||
|
||||
## Live Demo
|
||||
|
||||
:::demo checkbox-variants
|
||||
Shows different checkbox states including checked, unchecked, indeterminate, and disabled
|
||||
:::
|
||||
|
||||
## Props
|
||||
|
||||
<PropsTable :props="[
|
||||
{ name: 'checked', type: 'boolean | \'indeterminate\'', required: false, default: 'false', description: 'Whether the checkbox is checked' },
|
||||
{ name: 'defaultChecked', type: 'boolean', required: false, default: 'false', description: 'Initial checked state (uncontrolled)' },
|
||||
{ name: 'onCheckedChange', type: '(checked: boolean) => void', required: false, default: '-', description: 'Callback when checked state changes' },
|
||||
{ name: 'disabled', type: 'boolean', required: false, default: 'false', description: 'Whether the checkbox is disabled' },
|
||||
{ name: 'required', type: 'boolean', required: false, default: 'false', description: 'Whether the checkbox is required' },
|
||||
{ name: 'name', type: 'string', required: false, default: '-', description: 'Form input name' },
|
||||
{ name: 'value', type: 'string', required: false, default: '-', description: 'Form input value' },
|
||||
{ name: 'className', type: 'string', required: false, default: '-', description: 'Custom CSS class name' }
|
||||
]" />
|
||||
|
||||
## States
|
||||
|
||||
### Unchecked
|
||||
|
||||
The default state when the checkbox is not selected.
|
||||
|
||||
### Checked
|
||||
|
||||
The checkbox shows a checkmark icon when selected.
|
||||
|
||||
### Indeterminate
|
||||
|
||||
A mixed state (partial selection) typically used for parent checkboxes when some but not all children are selected.
|
||||
|
||||
### Disabled
|
||||
|
||||
Disabled checkboxes are non-interactive and displayed with reduced opacity.
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Checkbox
|
||||
|
||||
```vue
|
||||
<Checkbox />
|
||||
```
|
||||
|
||||
### With Label
|
||||
|
||||
```vue
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox id="terms" />
|
||||
<label for="terms">I agree to the terms and conditions</label>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Controlled Checkbox
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const checked = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox v-model:checked="checked" />
|
||||
<span>{{ checked ? 'Checked' : 'Unchecked' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Indeterminate State
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const state = ref('indeterminate')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Checkbox :checked="state" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### Form Integration
|
||||
|
||||
```vue
|
||||
<form @submit="handleSubmit">
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox id="newsletter" name="newsletter" value="yes" />
|
||||
<label for="newsletter">Subscribe to newsletter</label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Checkbox id="updates" name="updates" value="yes" />
|
||||
<label for="updates">Receive product updates</label>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" class="mt-4">Submit</Button>
|
||||
</form>
|
||||
```
|
||||
|
||||
## Related Components
|
||||
|
||||
- [Input](/components/ui/input)
|
||||
- [Select](/components/ui/select)
|
||||
- [Radio Group](/components/ui/radio-group)
|
||||
118
docs/components/ui/input.md
Normal file
118
docs/components/ui/input.md
Normal file
@@ -0,0 +1,118 @@
|
||||
---
|
||||
title: Input
|
||||
description: Text input component for forms and user input
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# Input
|
||||
|
||||
## Overview
|
||||
|
||||
The Input component provides a styled text input field that extends the native HTML input element with consistent styling and error state support.
|
||||
|
||||
## Live Demo
|
||||
|
||||
:::demo input-variants
|
||||
Shows all input states including default, error, and disabled
|
||||
:::
|
||||
|
||||
## Props
|
||||
|
||||
<PropsTable :props="[
|
||||
{ name: 'type', type: 'string', required: false, default: '\'text\'', description: 'HTML input type (text, password, email, number, etc.)' },
|
||||
{ name: 'error', type: 'boolean', required: false, default: 'false', description: 'Whether the input has an error (shows destructive border)' },
|
||||
{ name: 'disabled', type: 'boolean', required: false, default: 'false', description: 'Whether the input is disabled' },
|
||||
{ name: 'placeholder', type: 'string', required: false, default: '-', description: 'Placeholder text shown when input is empty' },
|
||||
{ name: 'value', type: 'string | number', required: false, default: '-', description: 'Controlled input value' },
|
||||
{ name: 'defaultValue', type: 'string | number', required: false, default: '-', description: 'Uncontrolled input default value' },
|
||||
{ name: 'onChange', type: '(event: ChangeEvent) => void', required: false, default: '-', description: 'Change event callback' },
|
||||
{ name: 'className', type: 'string', required: false, default: '-', description: 'Custom CSS class name' }
|
||||
]" />
|
||||
|
||||
## States
|
||||
|
||||
### Default
|
||||
|
||||
Standard input field with border and focus ring.
|
||||
|
||||
### Error
|
||||
|
||||
Error state with destructive border color. Set the `error` prop to `true`.
|
||||
|
||||
### Disabled
|
||||
|
||||
Disabled state with reduced opacity. Set the `disabled` prop to `true`.
|
||||
|
||||
### Focus
|
||||
|
||||
Focused state with ring outline.
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Input
|
||||
|
||||
```tsx
|
||||
import { Input } from '@/components/ui/Input'
|
||||
|
||||
function Example() {
|
||||
return <input type="text" placeholder="Enter text..." />
|
||||
}
|
||||
```
|
||||
|
||||
### Controlled Input
|
||||
|
||||
```tsx
|
||||
import { Input } from '@/components/ui/Input'
|
||||
|
||||
function Example() {
|
||||
const [value, setValue] = useState('')
|
||||
|
||||
return (
|
||||
<Input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
placeholder="Enter text..."
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Input with Error State
|
||||
|
||||
```tsx
|
||||
import { Input } from '@/components/ui/Input'
|
||||
|
||||
function Example() {
|
||||
return (
|
||||
<Input
|
||||
type="text"
|
||||
error
|
||||
placeholder="Invalid input..."
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Password Input
|
||||
|
||||
```tsx
|
||||
import { Input } from '@/components/ui/Input'
|
||||
|
||||
function Example() {
|
||||
return <Input type="password" placeholder="Enter password..." />
|
||||
}
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
- **Keyboard Navigation**: Full native keyboard support
|
||||
- **ARIA Attributes**: Supports all standard input ARIA attributes
|
||||
- **Focus Visible**: Clear focus indicator for keyboard navigation
|
||||
- **Error State**: Visual indication for error state (use with `aria-invalid` and `aria-describedby`)
|
||||
|
||||
## Related Components
|
||||
|
||||
- [Button](/components/ui/button)
|
||||
- [Select](/components/ui/select)
|
||||
- [Checkbox](/components/ui/checkbox)
|
||||
127
docs/components/ui/select.md
Normal file
127
docs/components/ui/select.md
Normal file
@@ -0,0 +1,127 @@
|
||||
---
|
||||
title: Select
|
||||
description: Dropdown select component for choosing from a list of options
|
||||
sidebar: auto
|
||||
---
|
||||
|
||||
# Select
|
||||
|
||||
## Overview
|
||||
|
||||
The Select component allows users to choose a single value from a list of options. Built on Radix UI Select Primitive, it provides accessibility and keyboard navigation out of the box.
|
||||
|
||||
## Live Demo
|
||||
|
||||
:::demo select-variants
|
||||
Shows different select configurations including basic usage, with labels, and with separators
|
||||
:::
|
||||
|
||||
## Components
|
||||
|
||||
The Select component includes the following sub-components:
|
||||
|
||||
| Component | Purpose |
|
||||
|-----------|---------|
|
||||
| `Select` | Root component that manages state |
|
||||
| `SelectTrigger` | Button that opens the dropdown |
|
||||
| `SelectValue` | Displays the selected value |
|
||||
| `SelectContent` | Dropdown content container |
|
||||
| `SelectItem` | Individual selectable option |
|
||||
| `SelectLabel` | Non-interactive label for grouping |
|
||||
| `SelectGroup` | Groups items together |
|
||||
| `SelectSeparator` | Visual separator between items |
|
||||
| `SelectScrollUpButton` | Scroll button for long lists |
|
||||
| `SelectScrollDownButton` | Scroll button for long lists |
|
||||
|
||||
## Props
|
||||
|
||||
### Select Root
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `value` | `string` | - | Currently selected value (controlled) |
|
||||
| `defaultValue` | `string` | - | Default selected value |
|
||||
| `onValueChange` | `(value: string) => void` | - | Callback when value changes |
|
||||
| `disabled` | `boolean` | `false` | Whether the select is disabled |
|
||||
| `required` | `boolean` | `false` | Whether a value is required |
|
||||
| `name` | `string` | - | Form input name |
|
||||
|
||||
### SelectTrigger
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `className` | `string` | - | Custom CSS class name |
|
||||
|
||||
### SelectItem
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `value` | `string` | - | Item value |
|
||||
| `disabled` | `boolean` | `false` | Whether the item is disabled |
|
||||
| `className` | `string` | - | Custom CSS class name |
|
||||
|
||||
## Usage Examples
|
||||
|
||||
### Basic Select
|
||||
|
||||
```vue
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an option" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="option1">Option 1</SelectItem>
|
||||
<SelectItem value="option2">Option 2</SelectItem>
|
||||
<SelectItem value="option3">Option 3</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
### With Labels and Groups
|
||||
|
||||
```vue
|
||||
<Select>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Choose a fruit" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectLabel>Fruits</SelectLabel>
|
||||
<SelectItem value="apple">Apple</SelectItem>
|
||||
<SelectItem value="banana">Banana</SelectItem>
|
||||
<SelectItem value="orange">Orange</SelectItem>
|
||||
<SelectSeparator />
|
||||
<SelectLabel>Vegetables</SelectLabel>
|
||||
<SelectItem value="carrot">Carrot</SelectItem>
|
||||
<SelectItem value="broccoli">Broccoli</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
```
|
||||
|
||||
### Controlled Select
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const selectedValue = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Select v-model="selectedValue">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="a">Option A</SelectItem>
|
||||
<SelectItem value="b">Option B</SelectItem>
|
||||
<SelectItem value="c">Option C</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</template>
|
||||
```
|
||||
|
||||
## Related Components
|
||||
|
||||
- [Input](/components/ui/input)
|
||||
- [Checkbox](/components/ui/checkbox)
|
||||
- [Button](/components/ui/button)
|
||||
Reference in New Issue
Block a user