Added CheckBox.Group to Form demo (#13680)

This commit is contained in:
Julia Passynkova 2018-12-18 00:33:57 -05:00 committed by 偏右
parent 4b0bcee220
commit 7b643d2aaa
2 changed files with 178 additions and 1 deletions

View File

@ -3118,6 +3118,163 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>
<div
class="ant-col-6 ant-form-item-label"
>
<label
class=""
for="checkbox-group"
title="Checkbox.Group"
>
Checkbox.Group
</label>
</div>
<div
class="ant-col-14 ant-form-item-control-wrapper"
>
<div
class="ant-form-item-control has-success"
>
<span
class="ant-form-item-children"
>
<div
class="ant-checkbox-group"
data-__field="[object Object]"
data-__meta="[object Object]"
id="checkbox-group"
style="width:100%"
>
<div
class="ant-row"
>
<div
class="ant-col-8"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"
>
<span
class="ant-checkbox ant-checkbox-checked"
>
<input
checked=""
class="ant-checkbox-input"
type="checkbox"
value="A"
/>
<span
class="ant-checkbox-inner"
/>
</span>
<span>
A
</span>
</label>
</div>
<div
class="ant-col-8"
>
<label
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"
>
<span
class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"
>
<input
checked=""
class="ant-checkbox-input"
disabled=""
type="checkbox"
value="B"
/>
<span
class="ant-checkbox-inner"
/>
</span>
<span>
B
</span>
</label>
</div>
<div
class="ant-col-8"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox"
>
<input
class="ant-checkbox-input"
type="checkbox"
value="C"
/>
<span
class="ant-checkbox-inner"
/>
</span>
<span>
C
</span>
</label>
</div>
<div
class="ant-col-8"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox"
>
<input
class="ant-checkbox-input"
type="checkbox"
value="D"
/>
<span
class="ant-checkbox-inner"
/>
</span>
<span>
D
</span>
</label>
</div>
<div
class="ant-col-8"
>
<label
class="ant-checkbox-wrapper"
>
<span
class="ant-checkbox"
>
<input
class="ant-checkbox-input"
type="checkbox"
value="E"
/>
<span
class="ant-checkbox-inner"
/>
</span>
<span>
E
</span>
</label>
</div>
</div>
</div>
</span>
</div>
</div>
</div>
<div
class="ant-row ant-form-item"
>

View File

@ -16,7 +16,8 @@ Demostration for validataion configuration for form controls which are not show
````jsx
import {
Form, Select, InputNumber, Switch, Radio,
Slider, Button, Upload, Icon, Rate,
Slider, Button, Upload, Icon, Rate, Checkbox,
Row, Col,
} from 'antd';
const FormItem = Form.Item;
@ -147,6 +148,25 @@ class Demo extends React.Component {
)}
</FormItem>
<Form.Item
{...formItemLayout}
label="Checkbox.Group"
>
{getFieldDecorator("checkbox-group", {
initialValue: ["A", "B"],
})(
<Checkbox.Group style={{ width: "100%" }}>
<Row>
<Col span={8}><Checkbox value="A">A</Checkbox></Col>
<Col span={8}><Checkbox disabled value="B">B</Checkbox></Col>
<Col span={8}><Checkbox value="C">C</Checkbox></Col>
<Col span={8}><Checkbox value="D">D</Checkbox></Col>
<Col span={8}><Checkbox value="E">E</Checkbox></Col>
</Row>
</Checkbox.Group>
)}
</Form.Item>
<FormItem
{...formItemLayout}
label="Rate"