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
Checkbox 复选框	用于二元选择的复选框组件	auto

Checkbox 复选框

概述

Checkbox 复选框组件允许用户从一组选项中选择一个或多个选项。基于 Radix UI Checkbox Primitive 构建，提供完整的无障碍支持，包括键盘导航。

语法演示

:::demo checkbox-variants 展示不同的复选框状态，包括选中、未选中、半选和禁用状态 :::

属性

状态说明

Unchecked（未选中）

复选框未被选择时的默认状态。

Checked（已选中）

复选框被选择时显示勾选图标。

Indeterminate（半选）

混合状态（部分选择），通常用于父级复选框，当部分但不是全部子项被选中时使用。

Disabled（禁用）

禁用的复选框不可交互，并以降低的透明度显示。

使用示例

基础复选框

<Checkbox />

带标签的复选框

<div class="flex items-center space-x-2">
  <Checkbox id="terms" />
  <label for="terms">我同意条款和条件</label>
</div>

受控复选框

<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 ? '已选中' : '未选中' }}</span>
  </div>
</template>

半选状态

<script setup>
import { ref } from 'vue'

const state = ref('indeterminate')
</script>

<template>
  <Checkbox :checked="state" />
</template>

表单集成

<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">订阅新闻通讯</label>
    </div>
    <div class="flex items-center space-x-2">
      <Checkbox id="updates" name="updates" value="yes" />
      <label for="updates">接收产品更新</label>
    </div>
  </div>
  <Button type="submit" class="mt-4">提交</Button>
</form>

3.1 KiB Raw Blame History Unescape Escape