切换

Switch 组件用作选中和未选中状态之间的替代方案。

安装

npx nextui-cli@latest add switch

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

导入

用法

带标签

禁用

尺寸

颜色

带拇指图标

带图标

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

受控

注意: NextUI Switch 也支持原生事件，例如 onChange，这对表单库（如 Formik 和 React Hook Form）很有用。

插槽

• base: 开关的基础插槽。它是主要包装器。
• wrapper: 开始图标、结束图标和滑块的包装器。
• thumb: 开关的拇指元素。它是圆形元素。
• label: 开关的标签插槽。
• startContent: 开关开始处的图标插槽。
• endContent: 开关结束处的图标插槽。
• thumbIcon: 拇指内部的图标插槽。

自定义样式

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

自定义实现

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

数据属性

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

开关属性

开关事件

类型

切换图标属性

type IconProps = {
  "data-checked": string;
  width: string;
  height: string;
  isSelected: boolean;
  className: string;
};

type CheckboxIconProps = ReactNode | ((props: IconProps) => ReactNode);