Cube-Switch

介绍

滑动开关，用于切换 on/off 状态。

已适配RN

示例

基本用法

收起

<template>
  <view>
    <view>通过wx：model控制开关</view>
    <cube-switch wx:model="{{value}}"/>
    <view>通过设置value属性控制开关</view>
    <cube-switch disabled="{{true}}" value="{{true}}"/>
    <view>通过change事件获取当前开关状态</view>
    <cube-switch bindchange="getValue"/>
  </view>
</template>

<script>
  import { createComponent } from '@mpxjs/core'

  createComponent({
    data() {
      return {
        value: false,
        currentValue: true
      }
    },
    methods: {
      getValue(data) {
        this.currentValue = data.detail.value
      }
    }
  })
</script>

Props

参数	说明	类型	可选值	默认值
themeType	用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo	String	-	-
value	开关状态，可直接赋值	Boolean	true/false	false
switchDefaultGBC		String	-	-
switchOnGBC		String	-	-
disabled	是否禁用	Boolean	true/false	false

Events

事件名	说明	参数
change	当开关状态变化时触发	-
input	当开关状态变化时触发	-

CSS Variable

变量名	默认值	含义
$switch-width	40px	容器宽度
$switch-height	24px	容器高度
$switch-bgc	#EAEAEA	容器背景颜色
$switch-border-radius	15px	边框圆角
$switch-transition	background-color 0.3s	容器颜色过渡
$switch-handle-top	2px	小球上偏移
$switch-handle-left	2px	小球左偏移
$switch-handle-width	20px	小球宽度
$switch-handle-height	20px	小球高度
$switch-handle-bgc	#fff	小球颜色
$switch-handle-border-radius	50%	小球边框圆角
$switch-handle-transition	left 0.3s	小球left过渡
$switch-bgc-on	#FF6435	开关状态为true时，背景颜色
$switch-handle-left-on	18px	开关状态为true时，距左边界距离