简体中文
简体中文
English
联系我们
注册
登录
layout空间导航

Checkbox 选择框

更新时间:2022-03-01 07:55:01下载pdf

Checkbox 选择框为单选框,是提供选择功能的组件。

代码演示

说明:详细 Demo 可参考 Checkbox Demo

import React, { Component } from "react";
import { View } from "react-native";
import { Checkbox } from "tuya-panel-kit";

export default class CheckboxScene extends Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,
      disabled: false,
    };
  }

  _handleChange = (checked) => {
    this.setState({ checked });
  };

  render() {
    return (
      <View>
        <Checkbox
          checked={this.state.checked}
          disabled={this.state.disabled}
          onChange={(checked) => this.setState({ checked })}
        >
          点击选中
        </Checkbox>
        <Checkbox
          color="red"
          checked={this.state.disabled}
          hideOnUnselect={true}
          onChange={(disabled) => this.setState({ disabled })}
        >
          点击禁用上面那个
        </Checkbox>
      </View>
    );
  }
}

交互演示

Checkbox 选择框

API

style

Checkbox 的样式。

类型 必传
ViewPropTypes.style

size

Checkbox 图标大小。

类型 必传 默认值
number 28

disabled

是否禁用。

类型 必传 默认值
boolean false

disabledColor

未选中时的图标颜色。

类型 必传 默认值
ColorPropType null

checked

是否选中。

类型 必传 默认值
boolean false

checkedIcon

选中状态图标 Path。

类型 必传 默认值
string null

unCheckedIcon

未选中状态图标 Path。

类型 必传 默认值
string null

reverse

是否颠倒 checkbox 图标和子元素的位置。

类型 必传 默认值
boolean false

hideOnUnselect

非选中状态下是否隐藏图标。

类型 必传 默认值
boolean false

color

checkbox 图标颜色。

类型 必传 默认值
ColorPropType #44DB5E

onChange

checkbox 的变更事件。

类型 必传 默认值
(checked) => void null

children

checkbox 的子元素,一般为 Text。

类型 必传 默认值
any null