Tantalum UI

Switch 开关选择器

注：

  • 支持表单，具体可参考 Form。
import { TaSwitch, TaCell, TaGroup, showToast } from '@/index'

export default function ExpSwitch() {
  return (
    <>
      <TaGroup title="基础用法">
        <TaCell label="开关">
          <TaSwitch />
        </TaCell>
      </TaGroup>
      <TaGroup title="自定义颜色/大小">
        <TaCell label="红色">
          <TaSwitch activeColor="#8b1721" color="#d79996" />
        </TaCell>
        <TaCell label="40px">
          <TaSwitch size="40" />
        </TaCell>
      </TaGroup>
      <TaGroup title="禁用">
        <TaCell label="关">
          <TaSwitch disabled />
        </TaCell>
        <TaCell label="开">
          <TaSwitch disabled value={true} />
        </TaCell>
      </TaGroup>
      <TaGroup title="事件监听">
        <TaCell label="change">
          <TaSwitch
            v-model="value"
            onChange={value => showToast(value ? '开' : '关')}
          />
        </TaCell>
      </TaGroup>
    </>
  )
}

Import 

import { TaSwitch } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Props

属性类型默认值必填说明
namestring否标识
disabledbooleanfalse否是否禁用
valuebooleanfalse否是否开启
colorstring否自定义默认态的背景色
activeColorstring否自定义激活态的背景色
sizestring | number否自定义组件大小（高度），单位 px

Events

事件描述回调函数参数
onChange点击切换状态时触发value: boolean