diff --git a/components/checkbox/Group.jsx b/components/checkbox/Group.jsx new file mode 100644 index 0000000000..eb6db6680f --- /dev/null +++ b/components/checkbox/Group.jsx @@ -0,0 +1,58 @@ +import React from 'react'; +import Checkbox from './index'; + +export default React.createClass({ + getDefaultProps() { + return { + options: [], + onChange() {}, + }; + }, + propTypes: { + defaultValue: React.PropTypes.array, + value: React.PropTypes.array, + options: React.PropTypes.array.isRequired, + onChange: React.PropTypes.func, + }, + getInitialState() { + const { value, defaultValue } = this.props; + return { + value: value || defaultValue || [], + }; + }, + componentWillReceiveProps(nextProps) { + if ('value' in nextProps) { + this.setState({ + value: nextProps.value, + }); + } + }, + toggleOption(option) { + const optionIndex = this.state.value.indexOf(option); + const value = this.state.value; + if (optionIndex === - 1) { + value.push(option); + } else { + value.splice(optionIndex, 1); + } + if (!('value' in this.props)) { + this.setState({ value }); + } + this.props.onChange(value); + }, + render() { + const options = this.props.options; + return
+ { + options.map(option => + + ) + } +
; + }, +}); diff --git a/components/checkbox/demo/group.md b/components/checkbox/demo/group.md new file mode 100644 index 0000000000..4d44e5e6a0 --- /dev/null +++ b/components/checkbox/demo/group.md @@ -0,0 +1,20 @@ +# 基本用法 + +- order: 3 + +方便的生成一个 Checkbox 组。 + +--- + +````jsx +import { Checkbox } from 'antd'; +const CheckboxGroup = Checkbox.Group; + +function onChange(checkedValues) { + console.log('checked = ', checkedValues); +} + +ReactDOM.render( + +, document.getElementById('components-checkbox-demo-group')); +```` diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx index 94aef5f39a..b04ab10b61 100644 --- a/components/checkbox/index.jsx +++ b/components/checkbox/index.jsx @@ -1,13 +1,18 @@ -import Checkbox from 'rc-checkbox'; +import RcCheckbox from 'rc-checkbox'; import React from 'react'; +import Group from './Group'; -export default React.createClass({ +const Checkbox = React.createClass({ getDefaultProps() { return { prefixCls: 'ant-checkbox' }; }, render() { - return ; + return ; } }); + +Checkbox.Group = Group; + +export default Checkbox; diff --git a/components/checkbox/index.md b/components/checkbox/index.md index 9095b9d0ee..b5357ec224 100644 --- a/components/checkbox/index.md +++ b/components/checkbox/index.md @@ -19,6 +19,15 @@ | 参数 | 说明 | 类型 | 可选值 |默认值 | |-----------|------------------------------------------|------------|-------|--------| -| checked | 指定当前是否选中 | boolean | | false | -| defaultChecked | 初始是否选中 | boolean | | false | -| onChange | 变化时回调函数 | Function(e:Event) | | | | +| checked | 指定当前是否选中 | boolean | | false | +| defaultChecked | 初始是否选中 | boolean | | false | +| onChange | 变化时回调函数 | Function(e:Event) | | | | + +### Checkbox Group + +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|-----------|------------------------------------------|------------|---------|--------| +| defaultValue | 默认选中的选项 | array | | [] | +| value | 指定选中的选项| array | | [] | +| options | 指定可选项 | array | | [] | +| onChange | 变化时回调函数 | Function(checkedValue) | | | | diff --git a/style/components/checkbox.less b/style/components/checkbox.less index 9d2c3f83ac..f0da1aefd2 100644 --- a/style/components/checkbox.less +++ b/style/components/checkbox.less @@ -161,4 +161,15 @@ margin-left: 8px; } +.@{checkbox-wrap-prefix-cls}-group { + font-size: @font-size-base; + &-item { + display: inline-block; + margin-left: 16px; + &:first-child { + margin-left: 0; + } + } +} + }