Taroify

Switch 开关

用于在打开和关闭状态之间进行切换。

import { Switch } from "@taroify/core"

代码演示

通过 checked 绑定开关的选中状态，true 表示开，false 表示关。

<Switch />

通过 disabled 属性来禁用开关，禁用状态下开关不可点击。

<Switch disabled />

通过 loading 属性设置开关为加载状态，加载状态下开关不可点击。

<Switch loading />

通过 size 属性自定义开关的大小。

<Switch size="24" />

通过 css 设置打开与关闭时的背景色。

<Switch className="custom-color" />

.custom-color {
  --switch-background-color: #dcdee0;
  --switch-checked-color: #ee0a24;
}

<Cell align="center" title="标题" rightIcon={<Switch size="24" />} />

事件名	说明	回调参数
onChange	开关状态切换时触发	value: boolean

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
switch-size	30px $hd*	-
switch-font-size	var(—switch-size)	-
switch-width	2em	-
switch-height	1em	-
switch-border	var(—border-width-base) solid rgba(0, 0, 0, 0.1)	-
switch-background-color	var(—white)	-
switch-transition-duration	var(—animation-duration-base)	-
switch-node-size	1em	-
switch-node-width	var(—switch-node-size)	-
switch-node-height	var(—switch-node-size)	-
switch-node-translate-x	translateX(calc(var(—switch-width) - var(—switch-node-size)))	-
switch-node-background-color	var(—white)	-
switch-node-box-shadow	0 3px * $hd 1px * $hd 0 rgba(0, 0, 0, 0.05), 0 2px * $hd 2px * $hd 0 rgba(0, 0, 0, 0.1), 0 3px * $hd 3px * $hd 0 rgba(0, 0, 0, 0.05)	-
switch-checked-color	var(var(—primary-color)	-
switch-checked-background-color	var(—switch-checked-color)	-
switch-loading-color	var(—switch-checked-color)	-
switch-disabled-opacity	var(—disabled-opacity)	-