开关

开关组件用于在选中和未选中状态之间切换。

安装

以上命令仅用于单独安装。如果 @nextui-org/react 已经全局安装，则可以跳过此步骤。

导入

用法

带标签

禁用

尺寸

颜色

带拇指标识

带图标

您还可以使用 startContent 和 endContent 属性向开关的开头和结尾添加图标。

受控组件

注意：NextUI 的 Switch 组件也支持诸如 onChange 之类的原生事件，这对于诸如 Formik 和 React Hook Form 等表单库非常有用。

插槽

• base: 开关的基础插槽。它是主要的包装器。
• wrapper: 开始图标、结束图标和滑块的包装器。
• hiddenInput: 用于处理开关状态的隐藏输入元素。
• thumb: 开关的滑块元素。它是圆形元素。
• label: 开关的标签插槽。
• startContent: 开关开头的图标插槽。
• endContent: 开关结尾的图标插槽。
• thumbIcon: 滑块内部的图标插槽。

自定义样式

您可以通过将自定义 Tailwind CSS 类传递给组件插槽来自定义 Switch 组件。

自定义实现

如果您需要进一步自定义开关，可以使用 useSwitch hook 来创建您自己的实现。

数据属性

Switch 在 base 元素上具有以下属性

• data-selected: 当开关被选中时。基于 isSelected 属性。
• data-pressed: 当开关被按下时。基于 usePress
• data-readonly: 当开关为只读时。基于 isReadOnly 属性。
• data-hover: 当鼠标悬停在开关上时。基于 useHover
• data-focus: 当开关被聚焦时。基于 useFocusRing。
• data-focus-visible: 当使用键盘聚焦开关时。基于 useFocusRing。
• data-disabled: 当开关被禁用时。基于 isDisabled 属性。

可访问性

• 使用原生 HTML <input> 元素构建。
• 完全支持浏览器功能，如表单自动填充。
• 键盘焦点管理和跨浏览器标准化。
• 对 Tab 和 Space 键的键盘事件支持。
• 为辅助技术提供标签支持。
• 通过 ARIA 作为开关暴露给辅助技术。

API

Switch 属性

Switch 事件

类型

开关图标属性