2015-07-07 11:25:16 +08:00
|
|
|
|
# 表单控件
|
2015-06-15 20:24:01 +08:00
|
|
|
|
|
2015-07-21 14:55:22 +08:00
|
|
|
|
- order: 3
|
2015-06-15 20:24:01 +08:00
|
|
|
|
|
|
|
|
|
展示所有支持的表单控件。
|
|
|
|
|
|
2015-06-16 09:54:10 +08:00
|
|
|
|
`注`: 输入框:只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
|
2015-06-15 20:24:01 +08:00
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
2015-07-20 20:35:48 +08:00
|
|
|
|
````jsx
|
2015-10-29 08:41:51 +08:00
|
|
|
|
import {Form, Input, Select, Checkbox, Radio} from 'antd';
|
|
|
|
|
const FormItem = Form.Item;
|
|
|
|
|
const Option = Select.Option;
|
|
|
|
|
const RadioGroup = Radio.Group;
|
2015-07-20 20:35:48 +08:00
|
|
|
|
|
|
|
|
|
function handleSelectChange(value) {
|
|
|
|
|
console.log('selected ' + value);
|
|
|
|
|
}
|
|
|
|
|
|
2015-10-25 11:35:03 +08:00
|
|
|
|
ReactDOM.render(
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<Form horizontal>
|
|
|
|
|
<FormItem
|
|
|
|
|
id="control-input"
|
|
|
|
|
label="输入框:"
|
|
|
|
|
labelCol={{span: 6}}
|
|
|
|
|
wrapperCol={{span: 14}}>
|
|
|
|
|
<Input id="control-input" placeholder="Please enter..." />
|
|
|
|
|
</FormItem>
|
2015-10-09 15:44:10 +08:00
|
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<FormItem
|
|
|
|
|
id="control-textarea"
|
|
|
|
|
label="文本域:"
|
|
|
|
|
labelCol={{span: 6}}
|
|
|
|
|
wrapperCol={{span: 14}}>
|
2015-12-16 20:13:18 +08:00
|
|
|
|
<Input type="textarea" id="control-textarea" rows="3" />
|
2015-10-29 08:41:51 +08:00
|
|
|
|
</FormItem>
|
2015-10-09 15:44:10 +08:00
|
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<FormItem
|
|
|
|
|
id="select"
|
|
|
|
|
label="Select 选择器:"
|
|
|
|
|
labelCol={{span: 6}}
|
|
|
|
|
wrapperCol={{span: 14}}>
|
|
|
|
|
<Select id="select" size="large" defaultValue="lucy" style={{width:200}} onChange={handleSelectChange}>
|
|
|
|
|
<Option value="jack">jack</Option>
|
|
|
|
|
<Option value="lucy">lucy</Option>
|
|
|
|
|
<Option value="disabled" disabled>disabled</Option>
|
|
|
|
|
< Option value="yiminghe">yiminghe</Option>
|
|
|
|
|
</Select>
|
|
|
|
|
</FormItem>
|
2015-10-09 15:44:10 +08:00
|
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<FormItem
|
|
|
|
|
label="Checkbox 多选框:"
|
|
|
|
|
labelCol={{span: 6}}
|
|
|
|
|
wrapperCol={{span: 18}} >
|
|
|
|
|
<label className="ant-checkbox-vertical">
|
|
|
|
|
<Checkbox />选项一
|
|
|
|
|
</label>
|
|
|
|
|
<label className="ant-checkbox-vertical">
|
|
|
|
|
<Checkbox />选项二
|
|
|
|
|
</label>
|
|
|
|
|
<label className="ant-checkbox-vertical">
|
2015-11-25 17:47:55 +08:00
|
|
|
|
<Checkbox disabled />选项三(不可选)
|
2015-10-29 08:41:51 +08:00
|
|
|
|
</label>
|
|
|
|
|
</FormItem>
|
2015-10-09 15:44:10 +08:00
|
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<FormItem
|
|
|
|
|
label="Checkbox 多选框:"
|
|
|
|
|
labelCol={{span: 6}}
|
|
|
|
|
wrapperCol={{span: 18}} >
|
|
|
|
|
<label className="ant-checkbox-inline">
|
|
|
|
|
<Checkbox />选项一
|
|
|
|
|
</label>
|
|
|
|
|
<label className="ant-checkbox-inline">
|
|
|
|
|
<Checkbox />选项二
|
|
|
|
|
</label>
|
|
|
|
|
<label className="ant-checkbox-inline">
|
|
|
|
|
<Checkbox />选项三
|
|
|
|
|
</label>
|
|
|
|
|
</FormItem>
|
2015-10-09 15:44:10 +08:00
|
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
|
<FormItem
|
|
|
|
|
label="Radio 单选框:"
|
|
|
|
|
labelCol={{span: 6}}
|
|
|
|
|
wrapperCol={{span: 18}} >
|
|
|
|
|
<RadioGroup value="b">
|
|
|
|
|
<Radio value="a">A</Radio>
|
|
|
|
|
<Radio value="b">B</Radio>
|
|
|
|
|
<Radio value="c">C</Radio>
|
|
|
|
|
<Radio value="d">D</Radio>
|
|
|
|
|
</RadioGroup>
|
|
|
|
|
</FormItem>
|
|
|
|
|
</Form>
|
2015-07-20 20:35:48 +08:00
|
|
|
|
, document.getElementById('components-form-demo-form-controls'));
|
2015-06-15 20:24:01 +08:00
|
|
|
|
````
|