# switch

开关选择器。

# 使用示例

扫码预览

<template>
  <view class="demo-ui-page">
    <view class="demo-title">switch 开关</view>
    <demo-cell title="默认样式">
        <switch checked  />
        <switch />
    </demo-cell>
    <demo-cell title="不同颜色和尺寸">
      <switch checked color="#FFCC33" style="transform:scale(0.7)"/>
			<switch color="#FFCC33" style="transform:scale(0.7)"/>
      <switch color="#FFCC33" checked disabled style="transform:scale(0.7)"/>
      <switch color="#FFCC33" type="checkbox" style="transform:scale(0.7)"/>
    </demo-cell>
  </view>
</template>

<script>
	export default {
	}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

展开刷新关闭

# 属性说明

属性名	类型	默认值	说明
checked	Boolean	false	是否选中
disabled	Boolean	false	是否禁用
type	String	switch	样式，有效值：switch, checkbox
color	Color		switch 的颜色，同 css 的 color
@change	EventHandle		checked 改变时触发 change 事件，event.detail={ value:checked}

switch 的默认颜色是蓝色的。更改颜色使用 color 属性。
如需调节 switch 大小，可通过 css 的 scale 方法调节，如缩小到 70% 则 style="transform:scale(0.7)"

← radio textarea →