mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-01 15:03:57 +08:00
2fb93d20e0
- 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.
128 lines
3.4 KiB
Markdown
128 lines
3.4 KiB
Markdown
---
|
|
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)
|