Press UI

# Switch

Used to toggle between on and off states.

# Code Demo

# Basic usage

<press-switch :checked="checked" @change="onChange" />

export default{
   data() {
     return {
       checked: true,
     }
   },
   methods: {
     onChange(value) {
       // Need to manually update the checked status
       this. checked = value;
     }
   }
}

# Disabled state

<press-switch :checked="checked" disabled />

# Loading Status

<press-switch :checked="checked" loading />

# Custom size

<press-switch :checked="checked" size="24px" />

# Custom Colors

<press-switch
   :checked="checked"
   active-color="#07c160"
   inactive-color="#ee0a24"
/>

# Asynchronous control

<press-switch :checked="checked" @change="onChange" />

<!-- #ifndef H5 -->
<PressDialog
   id="tip-match-comm-tips-dialog"
/>
<!-- #endif -->

import PressDialogHandler from 'press-ui/press-dialog';

export default {
   data() {
     return {
       checked: true,
     }
   },
   methods: {
     onChange(value) {
       PressDialogHandler. show({
         title: 'Prompt',
         content: 'Whether to toggle the switch',
         confirmText: 'Confirm',
         cancelText: 'Cancel',
       }).then(() => {
         this. checked = value;
       });
     },
   }
}

# E-SPORT

<PressSwitch
   custom-class="press-switch--e-sport"
   :checked="checked"
   @change="onChange"
/>

# API

# Props

Parameter Description Type Default
name Identifier when submitted within the form string -
checked toggle checked state any false
loading Whether it is loading state boolean false
disabled Whether it is disabled boolean false
size switch size string 30px
active-color Background color when opened string #1989fa
inactive-color background color when inactive string #fff
active-value The value when turned on any true
inactive-value value when inactive any false

# Events

Event Name Description Parameters
change switch state switching callback event.detail: whether the switch is selected

# External style classes

class name description
custom-class root node style class
node-class dot style class

# Theme customization

--switch-width：
--switch-height：
--switch-node-size：
--switch-node-z-index：
--switch-node-top：
--switch-node-left：
--switch-node-background-color：
--switch-node-box-shadow：
--switch-background-color：
--switch-on-background-color：
--switch-transition-duration：
--switch-disabled-opacity：
--switch-border：
横屏

← Uploader →