Appearance

目录

<switch> ​

<switch>是Tenon中开关组件

WARNING

<switch>不支持嵌套子组件

属性 ​

属性名类型默认值说明
valueBooleanfalse是否打开
onColorString系统默认打开时的颜色
offColorString""关闭时的颜色
thumbColorString""关闭时的颜色

样式 ​

通用样式，可参考样式介绍

事件 ​

通用事件，可参考事件介绍

switch ​

当开关状态变化时触发 @param(checked:Boolean)

示例 ​


Tenon Vue ​

html
<!-- App.vue -->
<template>
   <switch
    v-model="checked"
    style="width: 1rem;"
    @switch="handleSwitch"
    openColor="#00ff00"
    closeColor="#ff0000"
    thumbColor="#00ffff"
  ></switch>
</template>
<script>
  export default{
    data(){
      return {
        checked: false
      }
    }
    methods: {
      handleSwitch(value){
        Toast.show('Switch Change Value:', value)
      }
    }
  }
</script>

更多用法，可参考Tenon Vue 官方示例。

Tenon React ​

jsx
import React, {useState} from "react"

import Tenon from "@hummer/tenon-react"

function SwitchApp() {
  let [value, setValue] = useState(false)

  return (
    <switch className="switch" value={value} onSwitch={(value) => setValue(value)}/>
  );
}

Tenon.render(<SwitchApp />)

更多用法，可参考Tenon React 官方示例。