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
Parameters | Description | Type | Default value |
---|---|---|---|
v-model | Switch selected state | any | false |
loading | Whether it is loading state | boolean | false |
disabled | Whether it is disabled | boolean | false |
size | The size of the switch button, the default unit is px | number | string | 52rpx |
active-color | Background color when opening | string | #1989fa |
inactive-color | Background color when turned off | string | rgba(120, 120, 128, 0.16) |
active-value | The corresponding value when opened | any | true |
inactive-value | The corresponding value when closed | any | false |
Events
Event name | Description | Callback parameters |
---|---|---|
change | Triggered when the switch state switches | value: any |
click | Triggered when clicked | event: MouseEvent |
Slots
Name | Description | Parameters |
---|---|---|
node | Custom button content | - |
background | Customize 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.
Name | Default | Description |
---|---|---|
--z-switch-size | 52rpx | - |
--z-switch-width | calc(1.8em + 8rpx) | - |
--z-switch-height | calc(1em + 8rpx) | - |
--z-switch-node-size | 1em | - |
--z-switch-node-background | var(--z-white) | - |
--z-switch-node-shadow | 0 6rpx 2rpx 0 rgba(0, 0, 0, 0.05) | - |
--z-switch-background | rgba(120, 120, 128, 0.16) | - |
--z-switch-on-background | var(--z-primary-color) | - |
--z-switch-duration | var(--z-duration-base) | - |
--z-switch-disabled-opacity | var(--z-disabled-opacity) | - |