mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-03-01 15:03:57 +08:00

Files

catlog22 2fb93d20e0 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.

2026-03-01 10:52:46 +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