Switch 开关组件


开关组件,在两个互斥对象进行选择

使用指南

在 Taro 文件中引入组件

  1. import { AtForm, AtSwitch } from 'taro-ui'

组件依赖的样式文件(仅按需引用时需要)

  1. @import "~taro-ui/dist/style/components/switch.scss";

一般用法

说明:

  • 该组件为受控组件,开发者能通过 checked 来初始化组件开关状态,切换开关时会触发 onChange 函数
  1. import Taro from '@tarojs/taro'
    import { AtForm, AtSwitch } from 'taro-ui'
    export default class Index extends Taro.Component {
    constructor () {
    super(...arguments)
    this.state = {
    value: false
    }
    }
    handleChange = value => {
    this.setState({ value })
    }
    render () {
    return (
    <AtForm>
    <AtSwitch title='开启中' checked={this.state.value} onChange={this.handleChange} />
    <AtSwitch title='已禁止' disabled onChange={this.handleChange} />
    <AtSwitch border={false} title='已关闭' />
    </AtForm>
    )
    }
    }

参数

参数说明类型可选值默认值
title标签名String--
color背景颜色String-#6190e8
checked是否显示开启Boolean-false
disabled是否禁止点击Boolean-false
border是否显示下划线边框Boolean-true

事件

事件名称说明返回参数
onChange输入框值改变时触发的事件当前值 value

Switch开关 - 图1