Switch

Used to turn options on or off.

Component Types

Basic Usage

v-model is the bound value, default is boolean type.

<wd-switch v-model="checked" />

const checked = ref<boolean>(true)

Modify Value

Modify the value when the switch is on via active-value property, and modify the value when the switch is off via inactive-value property.

<wd-switch v-model="checked" active-value="Wot" inactive-value="Merchant Backend" />

Component States

Loading State

Setting loading displays the loading state.

<wd-switch v-model="checked" loading active-text="Work" inactive-text="Off Work" />

Disabled State

Setting disabled disables the switch.

<wd-switch v-model="checked" disabled />

Component Styles

Modify Color

Modify the color when the switch is on via active-color property, and modify the color when the switch is off via inactive-color property.

<wd-switch v-model="checked" active-color="#13ce66" inactive-color="#f00" />

Text Description

Set the text inside the switch via active-text and inactive-text.

<wd-switch v-model="checked" active-text="Work" inactive-text="Off Work" />

Custom Display Icon

Customize the icon inside the switch via active-icon and inactive-icon.

<wd-switch v-model="checked" active-icon="check" inactive-icon="close" />

Custom Action Icon

Customize the button icon via active-action-icon and inactive-action-icon.

<wd-switch v-model="checked" active-action-icon="check" inactive-action-icon="close" />

Shape

Set the shape via shape, optional values are round, square.

<wd-switch v-model="checked" shape="round" />
<wd-switch v-model="checked" shape="square" />

Custom Size

Set size to modify the switch size.

<wd-switch v-model="checked" size="24px" />

Special Styles

Use with Form

Can be placed in a form item as a right-side control.

<wd-form-item title="Use with Form" center>
  <wd-switch v-model="checked" size="20" />
</wd-form-item>

Before Change Hook

Setting before-change property, a hook before modification that receives the target value. Returning false means no modification, supports returning Promise<boolean>.

<wd-switch v-model="checked" :before-change="beforeChange" @change="handleChange" />

import { useDialog } from '@/uni_modules/wot-ui'

const message = useDialog()

const beforeChange = (value) => {
  return message.confirm('Switch the toggle?').then(() => true).catch(() => false)
}

Attributes

Parameter	Description	Type	Default Value
model-value / v-model	Bound value	boolean | string | number	false
disabled	Whether disabled	boolean	false
inactive-action-icon	Inactive state action button icon	string	-
active-action-icon	Active state action button icon	string	-
active-icon	Active state icon, ignores active-text when set	string	-
inactive-icon	Inactive state icon, ignores inactive-text when set	string	-
active-text	Active state text	string	''
inactive-text	Inactive state text	string	''
active-value	Active value	boolean | string | number	true
inactive-value	Inactive value	boolean | string | number	false
active-color	Active color	string	-
inactive-color	Inactive color	string	-
size	Switch size	string | number	-
shape	Shape, optional values are round, square	SwitchShape	'round'
loading	Whether to show loading	boolean	false
loading-props	Loading configuration	Partial<LoadingProps>	-
before-change	Hook before modification	SwitchBeforeChange	-
class-prefix	Icon class name prefix	string	'wd-icon'
custom-class	Root node custom class name	string	''
custom-style	Root node custom style	string	''

Events

Event Name	Description	Parameters
change	Value modification event	{ value }

主题定制

CSS 变量

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

名称	默认值	描述
--wot-switch-color-action-bg	$base-white	操作块背景色
--wot-switch-color-action-icon	$primary-6	操作块图标颜色
--wot-switch-color-active-bg	$primary-6	激活态背景色
--wot-switch-color-inner-active-text	$text-white	内部文案激活态颜色
--wot-switch-color-inner-inactive-text	$text-auxiliary	内部文案非激活态颜色
--wot-switch-color-active-icon	$icon-white	内部图标激活态颜色
--wot-switch-color-inactive-bg	$filled-strong	非激活态背景色
--wot-switch-color-inactive-icon	$icon-auxiliary	非激活态图标颜色
--wot-switch-left-right-padding	$padding-tight	水平内边距
--wot-switch-top-bottom-padding	$padding-ultra-tight	垂直内边距
--wot-switch-size	$n-26	组件尺寸
--wot-switch-size-icon	0.5em	内部图标尺寸
--wot-switch-size-action-height	1em	操作块高度
--wot-switch-size-action-width	1em	操作块宽度
--wot-switch-size-action-icon	0.5em	操作块图标尺寸
--wot-switch-size-inner-height	calc($switch-size-action-height + $switch-top-bottom-padding * 2)	内部容器高度
--wot-switch-size-inner-min-width	calc(1.8em + $switch-top-bottom-padding * 2)	内部容器最小宽度
--wot-switch-inner-font-size	$typography-body-size-main	内部文案字号
--wot-switch-radius	$radius-main	方角模式圆角
--wot-switch-radius-full	$radius-radius-full	圆角模式圆角
--wot-switch-radius-action	$radius-small	方角模式操作块圆角
--wot-switch-radius-action-full	$radius-radius-full	圆角模式操作块圆角
--wot-switch-spacing	$spacing-super-tight	图标与文案间距
--wot-switch-transition-duration	0.3s	过渡时长
--wot-switch-disabled	$opacity-disabled	禁用态透明度

Source Code

Documentation

• Component