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

3.1 KiB

Raw Blame History

title, description, sidebar

title	description	sidebar
Input 输入框	用于表单和用户输入的文本输入组件	auto

Input 输入框

概述

输入框组件提供了一个样式化的文本输入字段，扩展了原生 HTML input 元素，具有一致的样式和错误状态支持。

语法演示

:::demo input-variants 展示所有输入框状态，包括默认、错误和禁用 :::

属性

状态

Default（默认）

带有边框和焦点环的标准输入框。

Error（错误）

错误状态，显示破坏性边框颜色。将 error 属性设置为 true。

Disabled（禁用）

禁用状态，透明度降低。将 disabled 属性设置为 true。

Focus（聚焦）

聚焦状态，带有环形轮廓。

使用示例

基础输入框

import { Input } from '@/components/ui/Input'

function Example() {
  return <input type="text" placeholder="输入文本..." />
}

受控输入框

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="输入文本..."
    />
  )
}

错误状态输入框

import { Input } from '@/components/ui/Input'

function Example() {
  return (
    <Input
      type="text"
      error
      placeholder="无效输入..."
    />
  )
}

密码输入框

import { Input } from '@/components/ui/Input'

function Example() {
  return <Input type="password" placeholder="输入密码..." />
}

无障碍访问

键盘导航：完全支持原生键盘操作
ARIA 属性：支持所有标准输入框 ARIA 属性
焦点可见：为键盘导航提供清晰的焦点指示器
错误状态：错误状态的视觉指示（与 aria-invalid 和 aria-describedby 配合使用）

3.1 KiB Raw Blame History Unescape Escape