@rax-ui/switch

Rax UI Switch

Usage no npm install needed!

<script type="module">
  import raxUiSwitch from 'https://cdn.skypack.dev/@rax-ui/switch';
</script>

README

display: Switch family: general

Switch

开关选择器，点击切换开关状态。

API

Props

名称 说明 类型 默认值
checked 指定当前是否选中，若有值，则为受控模式 boolean false
defaultChecked 初始是否选中 boolean false
disabled 是否禁用 bool false
readOnly 只读模式 boolean false
className Switch 类名 string
onChange 点击时回调函数 Function(checked: boolean, event: Event)

CSS API

名称 说明
switch__track switch 轨道样式
switch--checked__track 选中时的 switch 轨道样式
switch--unchecked__track 未选中时的 switch 轨道样式
switch--checked--disabled__track 禁用且选中时的 switch 轨道样式
switch--unchecked--disabled__track 禁用且未选中时的 switch 轨道样式
switch__thumb 选中时的圆样式
switch--checked__thumb 选中时的 switch 圆样式
switch--unchecked__thumb 未选中时的 switch 圆样式
switch--checked--disabled__thumb 禁用且选中时 switch 圆样式
switch--unchecked--disabled__thumb 禁用且未选中时的 switch 圆样式