checkbox组件

本组件基于yarn构建, 仅支持react版本, 模拟ant design的checkbox组件

安装

npm i tf-react-checkbox

引入

import Checkbox from 'tf-react-checkbox'
import 'tf-react-checkbox/dist/index.css'

api属性

// Checkbox
wrapClass: '', 
value: '',
defaultValue: '',
checked: false, //	指定当前是否选中	
defaultChecked: false,//	初始是否选中
disabled: false,//	失效状态
onChange: () => {}	//变化时回调函数

// CheckboxGroup
defaultValue: [], //	默认选中的选项	
disabled: false,//	整组失效	
options: [], //	指定可选项	
value: [], //	指定选中的选项
onChange: (checkedVal) => {} //	变化时回调函数

使用

// Checkbox
function onChange(e, isChecked, val) {
  console.log(`checked = ${isChecked}`);
}
<Checkbox onChange={onChange}>Checkbox</Checkbox>
// ======================

const CheckboxGroup = Checkbox.Group;

function onChange(checkedValues) {
  console.log('checked = ', checkedValues);
}

const plainOptions = ['Apple', 'Pear', 'Orange'];
const options = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange' },
];
const optionsWithDisabled = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange' },
];

  <div>
    <CheckboxGroup options={plainOptions} defaultValue={['Apple']} onChange={onChange2} />
    <CheckboxGroup options={options} defaultValue={['Pear']} onChange={onChange2} />
    <CheckboxGroup options={optionsWithDisabled} disabled defaultValue={['Apple']} onChange={onChange2} />
  </div>

更新日志

0.1.3
  去掉警告信息
  
0.1.0
  版本发布