Switch switch

introduce

Used to toggle between on and off state.

Code Demo

Basic usage

Bind the selected state of the switch through v-model, true means on, false means off.

<z-switch v-model="checked" />
import { ref } from 'vue';
const checked = ref(true);

Disabled state

Disable the switch through the disabled attribute. When disabled, the switch cannot be clicked.

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

Loading status

Set the switch to the loading state through the loading attribute. The switch is not clickable in the loading state.

<z-switch v-model="checked" loading />

Custom size

Customize the size of the switch via the size attribute.

<z-switch v-model="checked" size="44rpx" />

Custom color

The active-color attribute represents the background color when it is opened, and inactive-color represents the background color when it is closed.

<z-switch v-model="checked" active-color="#ee0a24" inactive-color="#dcdee0" />

Custom buttons

Customize the content of the button via the node slot.

<z-switch v-model="checked">
<template #node>
<view class="icon-wrapper">
<z-icon
:name="checked ? 'plus-circle-fill' : 'minus-circle-fill'"
:color="checked ? 'var(--z-blue)' : 'var(--z-gray-5)'"
size="40rpx"
/>
</view>
</template>
</z-switch>

<style>
.demo-switch {
.icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
}
</style>

Asynchronous control

When you need to control the switch asynchronously, you can use the modelValue attribute and the update:model-value event instead of v-model, and manually handle the switch status in the event callback function.

<z-switch :model-value="checked" @update:model-value="onUpdateValue" />
<script lang="ts" setup>
import { ref } from 'vue'
import { useDialog } from '../../uni_modules/zebra-ui'
const dialog = useDialog()
const checked = ref(true)
const onUpdateValue = (newValue: any) => {
dialog
.showConfirmDialog({
title: 'Reminder',
message: 'Do you want to toggle the switch? '
})
.then(() => {
checked.value = newValue
})
}
</script>

Use with cells

<z-cell center title="标题">
<template #right-icon>
<z-switch v-model="checked" />
</template>
</z-cell>

API

Props

ParametersDescriptionTypeDefault value
v-modelSwitch selected stateanyfalse
loadingWhether it is loading statebooleanfalse
disabledWhether it is disabledbooleanfalse
sizeThe size of the switch button, the default unit is pxnumber | string52rpx
active-colorBackground color when openingstring#1989fa
inactive-colorBackground color when turned offstringrgba(120, 120, 128, 0.16)
active-valueThe corresponding value when openedanytrue
inactive-valueThe corresponding value when closedanyfalse

Events

Event nameDescriptionCallback parameters
changeTriggered when the switch state switchesvalue: any
clickTriggered when clickedevent: MouseEvent

Slots

NameDescriptionParameters
nodeCustom button content-
backgroundCustomize the background content of the switch-

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

NameDefaultDescription
--z-switch-size52rpx-
--z-switch-widthcalc(1.8em + 8rpx)-
--z-switch-heightcalc(1em + 8rpx)-
--z-switch-node-size1em-
--z-switch-node-backgroundvar(--z-white)-
--z-switch-node-shadow0 6rpx 2rpx 0 rgba(0, 0, 0, 0.05)-
--z-switch-backgroundrgba(120, 120, 128, 0.16)-
--z-switch-on-backgroundvar(--z-primary-color)-
--z-switch-durationvar(--z-duration-base)-
--z-switch-disabled-opacityvar(--z-disabled-opacity)-