nuke-checkbox

    2.3.12 • Public • Published

    Checkbox

    • category: UI
    • chinese: 复选框组件
    • type: UI 组件

    Nuke UI

    nuke-checkbox@ALINPM nuke-checkbox@ALINPM

    何时使用

    Checkbox 组件与 Switch 组件类似,只有开、关 2 种状态,但使用场景不同:

    Switch 通常用于单个零散的配置项设置,而 Checkbox 通常用于某数据源中多项数据的选择。

    API

    参数 说明 类型 默认值
    size 大小 string medium( 可选 small)
    checked 是否选中 boolean
    defaultChecked 默认选中 boolean false
    disabled 是否禁用 boolean false
    onChange 状态改变时的回调函数 function(checked,e)
    type 复选框类型 string normal(list,empty)
    touchStyle 触摸区域样式 object {}
    ignoreContext 忽略上层父级 context,当 radio.group 的子级存在非 group 模式的 radio 时需设置为 false bool(false)

    Checkbox.Group

    参数 说明 类型 默认值
    dataSource 数据源 array []
    reverse 翻转 label 与 checkbox 的渲染顺序 bool false
    value 选中项目 array []
    onChange 状态改变时的回调函数 function(checked,e)
    style group 整个 container 上的样式 Object {}
    renderItem 自定义 item 的渲染方式,可通过此方法扩大点击范围 function ()
    groupItemStyle 每个 item 的外层渲染样式 object {}
    labelStyle 每个 item 的 label 文案样式 object {}

    受控用法与非受控用法

    所有的输入、交互类组件都有受控用法和非受控用法。

    • 受控用法: 组件状态受到外部传入的 props 影响,外部 props 改变,组件才改变,如下 demo :
    constructor() {
        super();
        this.state = {
            checked: true
        }
    }
    change = (value) => {
        this.setState({
            checked:!value
        });
    }
    //...
    render(){
        return (<Checkbox checked={this.state.checked} onChange={this.change}/>)
    }
    • 非受控用法: 组件自身自由改变,并通过事件通知外部改变成了什么。如下 demo :
    change = (value) => {
        console.log('switch 改变成了:',value);
    }
    //...
    render(){
        return (<Checkbox defaultChecked={true} onChange={this.change}/>)
    }

    demo 参考

    扫码预览 ( 手淘、千牛、天猫等 )

    使用方法

    • 安装
    // 切换到你的 rax 项目中
    npm i nuke-checkbox --save
    // 参考如下 demo 您可能还需要安装
    // npm i nuke-view nuke-page nuke-text --save
    • 调用示例
    /** @jsx createElement */
    import { createElement, Component, render } from 'rax';
    import View from 'nuke-view';
    import Text from 'nuke-text';
    import Checkbox from 'nuke-checkbox';
    import Page from 'nuke-page';
    const themeOrange = '#ff6600';
    let App = class NukeDemoIndex extends Component {
      constructor() {
        super();
        this.state = {
          checked: false,
        };
      }
     
      onChange(value) {
        console.log(value);
      }
      changeControl(value) {
        this.setState({
          checked: value,
        });
      }
     
      render() {
        return (
          <Page title="Checkbox">
            <Page.Intro sub="普通样式" />
            <View style={styles.demo_item}>
              <View style={styles.group_item}>
                <Checkbox
                  defaultChecked={true}
                  size="small"
                  onChange={this.onChange.bind(this)}
                />
                <Text>苹果</Text>
              </View>
              <View style={styles.group_item}>
                <Checkbox size="small" onChange={this.onChange.bind(this)} />
                <Text></Text>
              </View>
            </View>
            <Page.Intro sub="空心样式" />
            <View style={styles.demo_item}>
              <View style={styles.group_item}>
                <Checkbox
                  defaultChecked={true}
                  type="empty"
                  size="small"
                  onChange={this.onChange.bind(this)}
                />
                <Text>苹果</Text>
              </View>
              <View style={styles.group_item}>
                <Checkbox
                  size="small"
                  type="empty"
                  onChange={this.onChange.bind(this)}
                />
                <Text></Text>
              </View>
            </View>
            <Page.Intro sub="list 样式" />
            <View style={[styles.demo_item, { flexDirection: 'column' }]}>
              <View style={styles.group_item}>
                <Checkbox
                  defaultChecked={true}
                  type="list"
                  size="small"
                  onChange={this.onChange.bind(this)}
                />
                <Text>浙江省杭州市余杭区</Text>
              </View>
              <View style={styles.group_item}>
                <Checkbox
                  size="small"
                  type="list"
                  onChange={this.onChange.bind(this)}
                />
                <Text>浙江省杭州市临安市</Text>
              </View>
            </View>
     
            <Page.Intro main="自定义大小颜色" />
            <View style={styles.demo_item}>
              <Checkbox
                style={{ width: '30rem', height: '30rem', fontSize: '20rem' }}
                defaultChecked={true}
                size="small"
                checkedStyle={{ backgroundColor: themeOrange }}
                unCheckedStyle={{ backgroundColor: themeOrange }}
                onChange={this.onChange.bind(this)}
              />
              <Checkbox
                defaultChecked={true}
                size="small"
                type="empty"
                checkedStyle={{ borderColor: themeOrange, color: themeOrange }}
                unCheckedStyle={{ borderColor: themeOrange }}
                onChange={this.onChange.bind(this)}
              />
              <Checkbox
                defaultChecked={true}
                size="small"
                type="list"
                checkedStyle={{ color: themeOrange }}
                onChange={this.onChange.bind(this)}
              />
            </View>
          </Page>
        );
      }
    };
     
    const styles = {
      demo_item: {
        width: 750,
        marginTop: 30,
        backgroundColor: '#ffffff',
        flexDirection: 'row',
        alignItem: 'center',
        paddingLeft: 12,
      },
      group_item: {
        height: 104,
        flexDirection: 'row',
        borderBottomWidth: '2rem',
        borderBottomStyle: 'solid',
        borderBottomColor: '#F7F8FA',
        alignItems: 'center',
      },
    };
     
    render(<App />);

    Install

    npm i nuke-checkbox

    DownloadsWeekly Downloads

    64

    Version

    2.3.12

    License

    Apache-2.0

    Unpacked Size

    112 kB

    Total Files

    23

    Last publish

    Collaborators

    • doub
    • fnatic
    • leanhunter
    • no-repeat