Swap 切换容器
Swap 可以使用 Rue 当前视觉风格和 compound 结构，但现在补上了更顺手的状态 API。 你可以继续手写 checkbox，也可以直接用checked、defaultChecked、indeterminate和onCheckedChange让组件自己生成隐藏输入。
何时使用
- 需要在两个内容之间做轻量切换，同时复用 Rue 当前的 swap 视觉和动效。
- 需要图标切换、文案切换、菜单开合、主题切换这类“一进一出”的状态表达。
- 需要 mixed/indeterminate 这类第三态，但又不想手动维护隐藏 checkbox。
推荐用法
# Props driven controlled swap
当前模式：light
# Props driven uncontrolled swap
这个例子不手写
input，但仍然是原生 checkbox 驱动。# Indeterminate state
当前状态：mixed
# Disabled states
组合示例
下面这些示例全部保持自由组合写法，适合对照 swap 的底层结构和 class mode 使用方式。
# Swap text
Current: OFF
# Swap volume icons
# Swap icons with rotate effect
# Hamburger button
# Swap icons with flip effect
# Activate using class name
HOT
COLD
API
推荐优先使用 props 驱动模式；如果你已经有自己的隐藏 checkbox，也可以使用基础结构。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
active | class mode 开关，追加 swap-active；适合外部 class 驱动 | boolean | false |
as | 根节点标签，默认 label | any | 'label' |
checked | 受控选中态；未手写 input 时会自动生成 checkbox | boolean | - |
defaultChecked | 非受控初始选中态 | boolean | false |
defaultIndeterminate | 非受控初始半选态，首次交互后会退出 mixed | boolean | false |
disabled | 禁用自动生成的 checkbox，并附加禁用视觉语义 | boolean | false |
effect | 推荐的效果写法，统一选择 rotate 或 flip | 'rotate' | 'flip' | - |
flip / rotate | 支持基础布尔写法 | boolean | false |
indeterminate | 受控半选态；自动输入模式下会同步到原生 checkbox.indeterminate | boolean | false |
inputClassName | 自动生成 checkbox 的 className | string | - |
inputProps | 自动生成 checkbox 的透传属性，如 name、value、id | Record<string, any> | - |
onChange | 变更事件，返回 checked、indeterminate、active、mode | (event, meta) => void | - |
onCheckedChange | 更轻量的 checked 回调 | (checked, event) => void | - |
Compound parts
Swap.On：选中态显示Swap.Off：未选中态显示Swap.Indeterminate：半选态显示FAQ
什么时候该手写 input，什么时候直接传 checked？
如果业务里只需要一个常规切换器，直接传checked、defaultChecked、onCheckedChange会更省事；如果你已经有现成的表单结构或需要完全接管输入节点， 继续手写input type="checkbox"也完全可以。
active 和 checked 有什么区别？
active只是追加swap-active，属于 class mode；checked/indeterminate则是 input mode，会驱动真实的 checkbox 状态。
effect 和 rotate / flip 应该怎么选？
新代码优先用effect，表达更集中；项目代码可以使用rotate或 flip也支持。