示例
直接操作示例,查看组件在具体任务中的状态与反馈。
即时生效设置
不可用设置
使用建议
切换后立即生效
Switch 表示当前设置状态,操作后应立即产生结果;需要最后提交的选择使用 Checkbox。
用陈述句命名设置
标签描述开启状态,例如“自动保存草稿”,避免使用含糊的“启用”或“关闭”。
说明受管策略
禁用时通过 description 解释权限或组织策略,避免让用户猜测为何无法操作。
引入方式
从已验证的公开子路径导入组件;全局样式接入方式见安装指南。
import { BaseSwitch } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- Switch 不持久化设置,也不处理保存失败后的回滚;宿主需要同步受控值并向用户反馈结果。
- Deterministic visual evidence and final packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseSwitchProps
extends Omit<
InputHTMLAttributes<HTMLInputElement>,
'children' | 'className' | 'disabled' | 'style' | 'type'
> {
label?: ReactNode;
description?: ReactNode;
disabled?: boolean;
controlSize?: BaseControlSize;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseSwitchClassNames;
style?: CSSProperties;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
label | 开关旁显示并说明开关含义的标签内容。 | ReactNode | — |
description | 用于补充标题或标签含义的说明内容。 | ReactNode | — |
disabled | 是否禁用该组件及其可交互行为。 | boolean | false |
controlSize | 内部表单控件使用的预设尺寸。 | BaseControlSize | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseSwitchClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |