Switch switch

introduce

Used to toggle between on and off state.

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>

Props

Events

Slots

Style variables

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