vant/packages/switch-cell/en-US.md

SwitchCell

SwitchCell component is an encapsulation of Switch and Cell.

Install

import { SwitchCell } from 'vant';

Vue.use(SwitchCell);

Usage

Basic Usage

<van-cell-group>
  <van-switch-cell v-model="checked" title="Title" />
</van-cell-group>

export default {
  data() {
    return {
      checked: true
    }
  }
}

Disabled

use disabled property to disable the component

<van-cell-group>
  <van-switch-cell v-model="checked" disabled title="Title" />
</van-cell-group>

Loading

use loading property to keep component in loading state

<van-cell-group>
  <van-switch-cell v-model="checked" loading title="Title" />
</van-cell-group>

API

Attribute	Description	Type	Default
v-model	on-off state of the switch	Boolean	-
title	the leftside title	String	''
loading	whether switch is loading	Boolean	false
disabled	whether to disable switch	Boolean	false
size	Size of switch	String	24px
active-color	Background of switch color when active	String	#1989fa
inactive-color	Background of switch color when inactive	String	#fff

Event

Event	Description	Arguments
change	triggered when the on-off state is changed	checked: switch is on or not