Toggle 开关

开关选择器，用于两个值之间的选择。

获取组件

MainIndividual
import { Toggle } from 'rsuite';

演示

默认

开关尺寸

颜色

带标签

内部标签

可以通过 checkedChildren,unCheckedChildren 两个属性分别设置开关两种状态下显示的内容

禁用与只读

加载中

无障碍设计

ARIA 属性

  • Toggle 具有 switch role 。
  • 当处于 checked 状态时，Toggle 将 aria-checked 设置为 true。
  • 当处于 unchecked 状态时，Toggle 将 aria-checked 设置为 false。
  • 当处于 loading 状态时，Toggle 将 aria-busy 设置为 true。
  • 当处于 disabled 状态时，Toggle 将 aria-disabled 设置为 true。
  • 当拥有 children 时，Toggle 将 aria-labelledby 设置为 children 的 id。

键盘交互

  • Space - 切换开关状态。

Props

<Toggle>

属性名称 类型 (默认值) 描述 版本
checked boolean 指定当前是否选中
checkedChildren ReactNode 选中显示的内容
classPrefix string ('toggle') 组件 CSS 类的前缀
color Color 开关颜色 Version 5.64.0 or above
defaultChecked boolean 初始是否选中
disabled boolean 禁用
label ReactNode 开关的标签 Version 6.0.0 or above
labelPlacement 'start' | 'end' ('end') 开关标签的位置 Version 6.0.0 or above
loading boolean 是否展示一个圈圈表示选中状态正在获取/更新
locale ToggleLocaleType 定义本地化设置，使组件文本根据用户地区显示相应语言
onChange (checked: boolean, event) => void 状态改变时的回调函数
size Size 开关尺寸
unCheckedChildren ReactNode 非选中显示的内容

Color 

type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';

Size 

type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';