mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-03 04:30:06 +08:00
更新 form demo。
This commit is contained in:
SimaQ
parent
5bb37f7033
commit
b8479d9d55
@ -2,7 +2,7 @@
|
||||
|
||||
- order: 2
|
||||
|
||||
1) 单独为输入框设置 `disabled` 属性；
|
||||
1) 单独为输入控件设置 `disabled` 属性；
|
||||
|
||||
2) 为 `<fieldset>` 设置 `disabled` 属性，可以禁用 `<fieldset>` 中包含的所有控件。
|
||||
|
||||
@ -10,42 +10,39 @@
|
||||
|
||||
````jsx
|
||||
var Form = antd.Form;
|
||||
var Input = Form.Input;
|
||||
var FormItem = Form.Item;
|
||||
var Button = antd.Button;
|
||||
var Checkbox = antd.Checkbox;
|
||||
var Radio = antd.Radio;
|
||||
var RadioGroup = antd.Radio.Group;
|
||||
|
||||
React.render(
|
||||
ReactDOM.render(
|
||||
<Form horizontal>
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="单独禁用输入框："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12">
|
||||
<Input type="text" value="我是禁用的" disabled />
|
||||
</FormItem>
|
||||
<Form.Input type="text" defaultValue="我是禁用的" disabled />
|
||||
</Form.Item>
|
||||
|
||||
<fieldset disabled>
|
||||
<legend>禁用的 fieldset</legend>
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="用户名："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
required={true}
|
||||
isCompact={true} >
|
||||
<Input type="static" value="大眼萌 minion" id="userName" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
required={true} >
|
||||
<Form.Input type="static" value="大眼萌 minion" id="userName" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="密码："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
required={true} >
|
||||
<Input type="password" value="123456" id="password" />
|
||||
</FormItem>
|
||||
<Form.Input type="password" defaultValue="123456" id="password" />
|
||||
</Form.Item>
|
||||
<div className="row">
|
||||
<div className="col-12 col-offset-5">
|
||||
<input type="submit" className="ant-btn ant-btn-primary" value="确 定" />
|
||||
<Form.Input type="submit" className="ant-btn ant-btn-primary" defaultValue="确 定" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
@ -10,8 +10,6 @@
|
||||
|
||||
````jsx
|
||||
var Form = antd.Form;
|
||||
var Input = Form.Input;
|
||||
var FormItem = Form.Item;
|
||||
var Select = antd.Select;
|
||||
var Option = Select.Option;
|
||||
var Checkbox = antd.Checkbox;
|
||||
@ -22,23 +20,23 @@ function handleSelectChange(value) {
|
||||
console.log('selected ' + value);
|
||||
}
|
||||
|
||||
React.render(
|
||||
ReactDOM.render(
|
||||
<Form horizontal>
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="输入框："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-14">
|
||||
<Input type="text" id="control-input" placeholder="Please enter..." />
|
||||
</FormItem>
|
||||
<Form.Input type="text" id="control-input" placeholder="Please enter..." />
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="文本域："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-14">
|
||||
<Input type="textarea" id="control-textarea"/>
|
||||
</FormItem>
|
||||
<Form.Input type="textarea" id="control-textarea"/>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="Select 选择器："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-14">
|
||||
@ -48,13 +46,12 @@ React.render(
|
||||
<Option value="disabled" disabled>disabled</Option>
|
||||
<Option value="yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="Checkbox 多选框："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-18"
|
||||
isCompact>
|
||||
wrapperClassName="col-18" >
|
||||
<label className="ant-checkbox-vertical">
|
||||
<Checkbox />选项一
|
||||
</label>
|
||||
@ -64,13 +61,12 @@ React.render(
|
||||
<label className="ant-checkbox-vertical">
|
||||
<Checkbox disabled={true} />选项三（不可选）
|
||||
</label>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="Checkbox 多选框："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-18"
|
||||
isCompact>
|
||||
wrapperClassName="col-18" >
|
||||
<label className="ant-checkbox-inline">
|
||||
<Checkbox />选项一
|
||||
</label>
|
||||
@ -80,20 +76,19 @@ React.render(
|
||||
<label className="ant-checkbox-inline">
|
||||
<Checkbox />选项三
|
||||
</label>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="Radio 单选框："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-18"
|
||||
isCompact>
|
||||
wrapperClassName="col-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.Item>
|
||||
</Form>
|
||||
, document.getElementById('components-form-demo-form-controls'));
|
||||
````
|
||||
|
||||
@ -2,68 +2,90 @@
|
||||
|
||||
- order: 0
|
||||
|
||||
**注意**：在我们的设计里，表单域为静态文本、`checkbox`、`radio`以及`input[type="file"]`的，其高度不同于一般的表单域，**需要将 `<Form.Item>` 的 `isCompact` 设置为 true**。
|
||||
示例展示了如何通过使用 `Form.ValueMixin` 来获取和更新表单提交的数值。
|
||||
|
||||
**注意：** 你需要为每个输入控件声明 `name` 属性。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Form = antd.Form;
|
||||
var Input = Form.Input;
|
||||
var FormItem = Form.Item;
|
||||
var Button = antd.Button;
|
||||
var Checkbox = antd.Checkbox;
|
||||
var Radio = antd.Radio;
|
||||
var RadioGroup = antd.Radio.Group;
|
||||
var Button = antd.Button;
|
||||
|
||||
React.render(
|
||||
<Form horizontal>
|
||||
<FormItem
|
||||
label="用户名："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-6"
|
||||
required={true}
|
||||
isCompact={true}>
|
||||
<Input type="static" value="大眼萌 minion" id="userName" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="密码："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-14"
|
||||
required={true} >
|
||||
<Input type="password" id="password" placeholder="请输入密码" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="您的性别："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-14"
|
||||
required={true}
|
||||
isCompact={true}>
|
||||
<RadioGroup value="male">
|
||||
<Radio value="male">男的</Radio>
|
||||
<Radio value="female">女的</Radio>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="备注："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-14"
|
||||
required={true}
|
||||
help="随便写点什么" >
|
||||
<Input type="textarea" placeholder="随便写" id="remark" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
wrapperClassName="col-14 col-offset-6">
|
||||
<label>
|
||||
<Checkbox /> 同意
|
||||
</label>
|
||||
</FormItem>
|
||||
<div className="row">
|
||||
<div className="col-16 col-offset-6">
|
||||
<Button type="primary">确定</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
var Demo = React.createClass({
|
||||
mixins: [Form.ValueMixin],
|
||||
|
||||
, document.getElementById('components-form-demo-horizontal-form'));
|
||||
getInitialState() {
|
||||
return {
|
||||
formData: {
|
||||
userName: '大眼萌 minion',
|
||||
password: undefined,
|
||||
gender: 'male',
|
||||
remark: undefined,
|
||||
agreement: undefined,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
console.log(this.state.formData);
|
||||
},
|
||||
|
||||
render() {
|
||||
var formData = this.state.formData;
|
||||
return (
|
||||
<Form horizontal onSubmit={this.handleSubmit}>
|
||||
<Form.Item
|
||||
label="用户名："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-6"
|
||||
required={true} >
|
||||
<Form.Input type="static" value="大眼萌 minion" id="userName" name="userName" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="密码："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-14"
|
||||
required={true} >
|
||||
<Form.Input type="password" id="password" name="password" placeholder="请输入密码" value={formData.password} onChange={this.setValue.bind(this, 'password')} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="您的性别："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-14"
|
||||
required={true} >
|
||||
<RadioGroup value="male" name="gender" value={formData.gender} onChange={this.setValue.bind(this, 'gender')} >
|
||||
<Radio value="male">男的</Radio>
|
||||
<Radio value="female">女的</Radio>
|
||||
</RadioGroup>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="备注："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-14"
|
||||
required={true}
|
||||
help="随便写点什么" >
|
||||
<Form.Input type="textarea" placeholder="随便写" id="remark" name="remark" value={formData.remark} onChange={this.setValue.bind(this, 'remark')} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
wrapperClassName="col-14 col-offset-6" >
|
||||
<label>
|
||||
<Checkbox name="agreement" value={formData.agreement} onChange={this.setValue.bind(this, 'agreement')} /> 同意
|
||||
</label>
|
||||
</Form.Item>
|
||||
<div className="row">
|
||||
<div className="col-16 col-offset-6">
|
||||
<Button type="primary" htmlType="submit">确定</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
});
|
||||
ReactDOM.render(<Demo />, document.getElementById('components-form-demo-horizontal-form'));
|
||||
````
|
||||
|
||||
@ -6,28 +6,49 @@
|
||||
|
||||
````jsx
|
||||
var Form = antd.Form;
|
||||
var Input = Form.Input;
|
||||
var FormItem = Form.Item;
|
||||
var Checkbox = antd.Checkbox;
|
||||
var Button = antd.Button;
|
||||
|
||||
React.render(
|
||||
<Form inline>
|
||||
<FormItem
|
||||
label="账户：">
|
||||
<Input type="text" placeholder="请输入账户名" id="userName" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
label="密码：">
|
||||
<Input type="password" placeholder="请输入密码" id="password2" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
type="checkbox">
|
||||
<label className="ant-checkbox-inline">
|
||||
<Checkbox /> 记住我
|
||||
</label>
|
||||
</FormItem>
|
||||
<input type="submit" className="ant-btn ant-btn-primary" value="登 录" />
|
||||
</Form>
|
||||
, document.getElementById('components-form-demo-inline-form'));
|
||||
var Demo = React.createClass({
|
||||
mixins: [Form.ValueMixin],
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
formData: {
|
||||
userName: undefined,
|
||||
password: undefined,
|
||||
agreement: undefined,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
console.log(this.state.formData);
|
||||
},
|
||||
|
||||
render() {
|
||||
var formData = this.state.formData;
|
||||
return (
|
||||
<Form inline onSubmit={this.handleSubmit}>
|
||||
<Form.Item
|
||||
label="账户：">
|
||||
<Form.Input type="text" placeholder="请输入账户名" id="userName" name="userName" onChange={this.setValue.bind(this, 'userName')} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="密码：">
|
||||
<Form.Input type="password" placeholder="请输入密码" id="password" name="password" onChange={this.setValue.bind(this, 'password')} />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<label className="ant-checkbox-inline">
|
||||
<Checkbox name="agreement" value={formData.agreement} onChange={this.setValue.bind(this, 'agreement')} /> 记住我
|
||||
</label>
|
||||
</Form.Item>
|
||||
<Form.Input type="submit" className="ant-btn ant-btn-primary" defaultValue="登 录" />
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<Demo />, document.getElementById('components-form-demo-inline-form'));
|
||||
````
|
||||
|
||||
@ -2,24 +2,33 @@
|
||||
|
||||
- order: 6
|
||||
|
||||
我们为定义了 `.ant-input` 类的输入框提供了三种尺寸：大（-lg）、中(默认)、小（-sm），往类名添加以上后缀即可。
|
||||
我们为 `<input />` 输入框定义了三种尺寸（大、默认、小）。
|
||||
|
||||
但是在 `<form>` 表单里面，我们只使用**大尺寸**， 即高度为 **32px**，作为唯一的尺寸。
|
||||
css 样式引用： 定义 `.ant-input` 类的基础上加上 `.ant-input-lg .ant-input-sm` 即可。
|
||||
|
||||
`<Form.Input />` 组件引用需要声明 `site` 属性即可，属性值为 ['small', 'default', 'large']。
|
||||
|
||||
注意： 在 `<form>` 表单里面，我们只使用**大尺寸**， 即高度为 **32px**，作为唯一的尺寸。
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<div class="row">
|
||||
<div class="ant-input-group">
|
||||
<div class="col-6">
|
||||
<input class="ant-input ant-input-lg" type="text" id="largeInput" placeholder="大尺寸"/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<input class="ant-input" type="text" id="defaultInput" placeholder="默认尺寸"/>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<input class="ant-input ant-input-sm" type="text" id="smallInput" placeholder="小尺寸"/>
|
||||
</div>
|
||||
|
||||
````jsx
|
||||
var Form = antd.Form;
|
||||
|
||||
ReactDOM.render(
|
||||
<div className="row">
|
||||
<Form.InputGroup>
|
||||
<div className="col-6">
|
||||
<Form.Input type="text" id="largeInput" size="large" placeholder="大尺寸" />
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<Form.Input type="text" id="defaultInput" placeholder="默认尺寸" />
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<Form.Input type="text" id="smallInput" placeholder="小尺寸" size="small" />
|
||||
</div>
|
||||
</Form.InputGroup>
|
||||
</div>
|
||||
</div>
|
||||
, document.getElementById('components-form-demo-input-size'));
|
||||
````
|
||||
|
||||
@ -6,34 +6,31 @@
|
||||
|
||||
````jsx
|
||||
var Form = antd.Form;
|
||||
var Input = Form.Input;
|
||||
var FormItem = Form.Item;
|
||||
var InputGroup = Input.Group;
|
||||
var Select = antd.Select;
|
||||
var Option = Select.Option;
|
||||
|
||||
React.render(
|
||||
ReactDOM.render(
|
||||
<Form horizontal>
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="标签输入框："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-16">
|
||||
<Input type="text" addonBefore="Http://" value="mysite.com" id="site1"/>
|
||||
</FormItem>
|
||||
<Form.Input type="text" addonBefore="Http://" value="mysite.com" id="site1"/>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="标签输入框："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-16">
|
||||
<Input type="text" addonBefore="Http://" addonAfter=".com" value="mysite" id="site2"/>
|
||||
</FormItem>
|
||||
<Form.Input type="text" addonBefore="Http://" addonAfter=".com" value="mysite" id="site2"/>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="select 标签输入框："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-16">
|
||||
<InputGroup>
|
||||
<Input type="text" id="site4" placeholder="www.mysite" />
|
||||
<Form.InputGroup>
|
||||
<Form.Input type="text" id="site4" placeholder="www.mysite" />
|
||||
<div className="ant-input-group-wrap">
|
||||
<Select defaultValue=".com" style={{width:70}}>
|
||||
<Option value=".com">.com</Option>
|
||||
@ -42,55 +39,55 @@ React.render(
|
||||
<Option value=".org">.org</Option>
|
||||
</Select>
|
||||
</div>
|
||||
</InputGroup>
|
||||
</FormItem>
|
||||
</Form.InputGroup>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="输入身份证："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-16">
|
||||
<InputGroup>
|
||||
<Form.InputGroup>
|
||||
<div className="col-6">
|
||||
<Input type="text" id="certNo1" />
|
||||
<Form.Input type="text" id="certNo1" />
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<Input type="text" id="certNo2" />
|
||||
<Form.Input type="text" id="certNo2" />
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<Input type="text" id="certNo3" />
|
||||
<Form.Input type="text" id="certNo3" />
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<Input type="text" id="certNo4" />
|
||||
<Form.Input type="text" id="certNo4" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
</FormItem>
|
||||
</Form.InputGroup>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="电话号码："
|
||||
labelClassName="col-6"
|
||||
wrapperClassName="col-16">
|
||||
<div className="row">
|
||||
<div className="col-4">
|
||||
<Input type="text" id="tel1" value="086" />
|
||||
<Form.Input type="text" id="tel1" value="086" />
|
||||
</div>
|
||||
<div className="col-2">
|
||||
<p className="ant-form-split">--</p>
|
||||
</div>
|
||||
<div className="col-18">
|
||||
<InputGroup type="group">
|
||||
<Form.InputGroup type="group">
|
||||
<div className="col-8">
|
||||
<Input type="text" id="tel1" />
|
||||
<Form.Input type="text" id="tel1" />
|
||||
</div>
|
||||
<div className="col-8">
|
||||
<Input type="text" id="tel2" />
|
||||
<Form.Input type="text" id="tel2" />
|
||||
</div>
|
||||
<div className="col-8">
|
||||
<Input type="text" id="tel3" />
|
||||
<Form.Input type="text" id="tel3" />
|
||||
</div>
|
||||
</InputGroup>
|
||||
</Form.InputGroup>
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
|
||||
, document.getElementById('components-form-demo-inputs'));
|
||||
|
||||
@ -8,9 +8,6 @@
|
||||
|
||||
````jsx
|
||||
var Form = antd.Form;
|
||||
var Input = Form.Input;
|
||||
var FormItem = Form.Item;
|
||||
var InputGroup = Input.Group;
|
||||
var Select = antd.Select;
|
||||
var Option = Select.Option;
|
||||
var InputNumber = antd.InputNumber;
|
||||
@ -20,112 +17,106 @@ var Menu = antd.Menu;
|
||||
var Dropdown = antd.Dropdown;
|
||||
var Slider = antd.Slider;
|
||||
var Icon = antd.Icon;
|
||||
var Button = antd.Button;
|
||||
|
||||
var menu = <Menu>
|
||||
<Menu.Item>
|
||||
<a target="_blank" href="http://www.alipay.com/">.net</a>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<a target="_blank" href="http://www.taobao.com/">.jp</a>
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
<a target="_blank" href="http://www.tmall.com/">.org</a>
|
||||
</Menu.Item>
|
||||
</Menu>;
|
||||
var Demo = React.createClass({
|
||||
mixins: [Form.ValueMixin],
|
||||
|
||||
function handleSelectChange(value) {
|
||||
console.log('selected ' + value);
|
||||
}
|
||||
getInitialState() {
|
||||
return {
|
||||
formData: {
|
||||
inputNumber: undefined,
|
||||
static: "唧唧复唧唧木兰当户织呀",
|
||||
switch: undefined,
|
||||
slider: undefined,
|
||||
select: undefined,
|
||||
startDate: undefined,
|
||||
endDate: undefined,
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
function onInputNumberChange(v){
|
||||
console.log('changed',v);
|
||||
}
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
console.log(this.state.formData);
|
||||
},
|
||||
|
||||
React.render(
|
||||
<Form horizontal>
|
||||
<FormItem
|
||||
label="InputNumber 数字输入框："
|
||||
labelClassName="col-8"
|
||||
wrapperClassName="col-10"
|
||||
required={true} >
|
||||
<InputNumber size="large" min={1} max={10} defaultValue={3} onChange={onInputNumberChange} style={{width:100}}/>
|
||||
<span className="ant-form-text"> 台机器</span>
|
||||
</FormItem>
|
||||
render() {
|
||||
var formData = this.state.formData;
|
||||
return (
|
||||
<Form horizontal onSubmit={this.handleSubmit} >
|
||||
<Form.Item
|
||||
label="InputNumber 数字输入框："
|
||||
labelClassName="col-8"
|
||||
wrapperClassName="col-10"
|
||||
required={true} >
|
||||
<InputNumber size="large" min={1} max={10} style={{width:100}} defaultValue={3} name="inputNumber" onChange={this.setValue.bind(this, 'inputNumber')} value={formData.inputNumber} />
|
||||
<span className="ant-form-text"> 台机器</span>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
label="我是标题："
|
||||
labelClassName="col-8"
|
||||
wrapperClassName="col-10"
|
||||
required={true}
|
||||
isCompact={true} >
|
||||
<p className="ant-form-text">唧唧复唧唧木兰当户织呀</p>
|
||||
<p className="ant-form-text">
|
||||
<a href="javascript:;">链接文字</a>
|
||||
</p>
|
||||
</FormItem>
|
||||
<Form.Item
|
||||
label="我是标题："
|
||||
labelClassName="col-8"
|
||||
wrapperClassName="col-10"
|
||||
required={true} >
|
||||
<Form.Input type="static" id="static" name="static" onChange={this.setValue.bind(this, 'static')} value="唧唧复唧唧木兰当户织呀" />
|
||||
<p className="ant-form-text">
|
||||
<a href="javascript:;">链接文字</a>
|
||||
</p>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
label="Switch 开关："
|
||||
labelClassName="col-8"
|
||||
wrapperClassName="col-10"
|
||||
required={true}>
|
||||
<Switch />
|
||||
</FormItem>
|
||||
<Form.Item
|
||||
label="Switch 开关："
|
||||
labelClassName="col-8"
|
||||
wrapperClassName="col-10"
|
||||
required={true} >
|
||||
<Switch name="switch" onChange={this.setValue.bind(this, 'switch')} value={formData.switch} />
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
label="Slider 滑动输入条："
|
||||
labelClassName="col-8"
|
||||
wrapperClassName="col-10"
|
||||
required={true}>
|
||||
<Slider marks={["A","B","C","D","E","F","G"]} />
|
||||
</FormItem>
|
||||
<Form.Item
|
||||
label="Slider 滑动输入条："
|
||||
labelClassName="col-8"
|
||||
wrapperClassName="col-10"
|
||||
required={true}>
|
||||
<Slider marks={["A","B","C","D","E","F","G"]} name="slider" onChange={this.setValue.bind(this, 'slider')} />
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
label="Select 选择器："
|
||||
labelClassName="col-8"
|
||||
wrapperClassName="col-16"
|
||||
required={true}>
|
||||
<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>
|
||||
<Form.Item
|
||||
label="Select 选择器："
|
||||
labelClassName="col-8"
|
||||
wrapperClassName="col-16"
|
||||
required={true}>
|
||||
<Select size="large" defaultValue="lucy" style={{width:200}} name="select" onChange={this.setValue.bind(this, 'select')} value={formData.select}>
|
||||
<Option value="jack">jack</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
<Option value="disabled" disabled>disabled</Option>
|
||||
<Option value="yiminghe">yiminghe</Option>
|
||||
</Select>
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
label="Datepicker 日期选择框："
|
||||
labelClassName="col-8"
|
||||
required={true}>
|
||||
<div className="col-6">
|
||||
<Datepicker />
|
||||
</div>
|
||||
<div className="col-1">
|
||||
<p className="ant-form-split">-</p>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<Datepicker />
|
||||
</div>
|
||||
</FormItem>
|
||||
<Form.Item
|
||||
label="Datepicker 日期选择框："
|
||||
labelClassName="col-8"
|
||||
required={true}>
|
||||
<div className="col-6">
|
||||
<Datepicker name="startDate" onChange={this.setValue.bind(this, 'startDate')} value={formData.startDate} />
|
||||
</div>
|
||||
<div className="col-1">
|
||||
<p className="ant-form-split">-</p>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<Datepicker name="endDate" onChange={this.setValue.bind(this, 'endDate')} value={formData.endDate} />
|
||||
</div>
|
||||
</Form.Item>
|
||||
<div className="row">
|
||||
<div className="col-16 col-offset-8">
|
||||
<Button type="primary" htmlType="submit">确定</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
<FormItem
|
||||
label="Datepicker 校验："
|
||||
labelClassName="col-8"
|
||||
validateStatus="error"
|
||||
required={true}>
|
||||
<div className="col-6">
|
||||
<Datepicker />
|
||||
</div>
|
||||
<div className="col-1">
|
||||
<p className="ant-form-split">-</p>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<Datepicker />
|
||||
</div>
|
||||
<div className="col-19 col-offset-8">
|
||||
<p className="ant-form-explain">请输入正确选项</p>
|
||||
</div>
|
||||
</FormItem>
|
||||
</Form>
|
||||
, document.getElementById('components-form-demo-mix'));
|
||||
ReactDOM.render(<Demo />, document.getElementById('components-form-demo-mix'));
|
||||
````
|
||||
|
||||
@ -2,79 +2,94 @@
|
||||
|
||||
- order: 4
|
||||
|
||||
我们为表单控件的校验状态定义了样式，共有三种校验状态类：
|
||||
我们为表单控件定义了三种校验状态，为 `<Form.Item>` 定义 `validateStatus` 属性即可。
|
||||
|
||||
`.has-success` `.has-error` `.has-warning`, 分别代表校验成功、校验失败、有警告。
|
||||
validateStatus: ['success', 'warning', 'error', 'validating']。
|
||||
|
||||
将以上三种校验状态类添加到这些控件的父级元素即可。
|
||||
另外为输入框添加反馈图标，设置 `<Form.Item>` 的 `hasFeedback` 属性值为 `true` 即可。
|
||||
|
||||
另外为输入框添加反馈图标，可以更好地反馈当前的校验状态，使用 `.has-feedback` 类包裹 input 输入框即可，在这里校验状态类就要和 `.has-feedback` 类同级。
|
||||
|
||||
**注意**: 反馈图标只能使用在文本输入框 `<input class="ant-input">` 元素上。
|
||||
**注意**: 反馈图标只对 `<Form.Input>` 有效。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Form = antd.Form;
|
||||
var Input = Form.Input;
|
||||
var FormItem = Form.Item;
|
||||
var InputGroup = Input.Group;
|
||||
var Datepicker = antd.Datepicker;
|
||||
|
||||
React.render(
|
||||
ReactDOM.render(
|
||||
<Form horizontal>
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="失败校验："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
validateStatus="error"
|
||||
help="请输入数字和字母组合">
|
||||
<Input type="text" value="无效选择" id="error" />
|
||||
</FormItem>
|
||||
<Form.Input type="text" value="无效选择" id="error" />
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="警告校验："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
validateStatus="warning">
|
||||
<Input type="text" value="前方高能预警" id="warning" />
|
||||
</FormItem>
|
||||
<FormItem
|
||||
<Form.Input type="text" value="前方高能预警" id="warning" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="校验中："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
hasFeedback={true}
|
||||
validateStatus="validating"
|
||||
help="信息审核中...">
|
||||
<Input type="text" value="我是被校验的内容" id="validating" />
|
||||
</FormItem>
|
||||
<Form.Input type="text" value="我是被校验的内容" id="validating" />
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="成功校验："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
hasFeedback={true}
|
||||
validateStatus="success">
|
||||
<Input type="text" value="我是正文" id="success" />
|
||||
</FormItem>
|
||||
<Form.Input type="text" value="我是正文" id="success" />
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
<Form.Item
|
||||
label="警告校验："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
hasFeedback={true}
|
||||
validateStatus="warning">
|
||||
<Form.Input type="text" value="前方高能预警" id="warning" />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item
|
||||
label="失败校验："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
hasFeedback={true}
|
||||
validateStatus="error"
|
||||
help="请输入数字和字母组合">
|
||||
<Input type="text" value="无效选择" id="error" />
|
||||
</FormItem>
|
||||
<Form.Input type="text" value="无效选择" id="error" />
|
||||
</Form.Item>
|
||||
|
||||
<FormItem
|
||||
label="警告校验："
|
||||
<Form.Item
|
||||
label="Datepicker 失败："
|
||||
labelClassName="col-5"
|
||||
wrapperClassName="col-12"
|
||||
hasFeedback={true}
|
||||
validateStatus="warning">
|
||||
<Input type="text" value="前方高能预警" id="warning" />
|
||||
</FormItem>
|
||||
validateStatus="error">
|
||||
<div className="col-6">
|
||||
<Datepicker />
|
||||
</div>
|
||||
<div className="col-1">
|
||||
<p className="ant-form-split">-</p>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<Datepicker />
|
||||
</div>
|
||||
<div className="col-19 col-offset-5">
|
||||
<p className="ant-form-explain">请输入正确选项</p>
|
||||
</div>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
, document.getElementById('components-form-demo-validate'));
|
||||
````
|
||||
|
||||
Loading…
Reference in New Issue
Block a user