mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-29 05:29:37 +08:00
Code Issues Actions 20 Packages Projects Releases Wiki Activity

Remove colon and add it via FormItem, close #1877

Browse Source
This commit is contained in:
afc163 2016-06-02 18:09:20 +08:00
parent 6c8a7b7944
commit 7d131a3b64
13 changed files with 74 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/form/FormItem.jsx
View File

@ -162,9 +162,15 @@ export default class FormItem extends React.Component {
[`${props.prefixCls}-item-required`]: required,
});
// remove user input colon
let label = props.label;
if (typeof props.label === 'string') {
label = props.label.replace(/：|:$/, '');
}
return props.label ? (
<label htmlFor={props.id || this.getId()} className={className} key="label">
{props.label}
{label}
</label>
) : null;
}

18
components/form/demo/advanced-search-form.md
View File

@ -16,19 +16,19 @@ ReactDOM.render(
<Row gutter={16}>
<Col sm={8}>
<FormItem
label="搜索名称："
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
</FormItem>
<FormItem
label="较长搜索名称："
label="较长搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}>
<DatePicker size="default" />
</FormItem>
<FormItem
label="搜索名称："
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
@ -36,19 +36,19 @@ ReactDOM.render(
</Col>
<Col sm={8}>
<FormItem
label="搜索名称："
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
</FormItem>
<FormItem
label="较长搜索名称："
label="较长搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}>
<DatePicker size="default" />
</FormItem>
<FormItem
label="搜索名称："
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
@ -56,19 +56,19 @@ ReactDOM.render(
</Col>
<Col sm={8}>
<FormItem
label="搜索名称："
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />
</FormItem>
<FormItem
label="较长搜索名称："
label="较长搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}>
<DatePicker size="default" />
</FormItem>
<FormItem
label="搜索名称："
label="搜索名称"
labelCol={{ span: 10 }}
wrapperCol={{ span: 14 }}>
<Input placeholder="请输入搜索名称" size="default" />

12
components/form/demo/form-controls.md
View File

@ -21,7 +21,7 @@ ReactDOM.render(
<Form horizontal>
<FormItem
id="control-input"
label="输入框："
label="输入框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}>
<Input id="control-input" placeholder="Please enter..." />
@ -29,7 +29,7 @@ ReactDOM.render(
<FormItem
id="control-textarea"
label="文本域："
label="文本域"
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}>
<Input type="textarea" id="control-textarea" rows="3" />
@ -37,7 +37,7 @@ ReactDOM.render(
<FormItem
id="select"
label="Select 选择器："
label="Select 选择器"
labelCol={{ span: 6 }}
wrapperCol={{ span: 14 }}>
<Select id="select" size="large" defaultValue="lucy" style={{ width: 200 }} onChange={handleSelectChange}>
@ -49,7 +49,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="Checkbox 多选框："
label="Checkbox 多选框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }} >
<Checkbox className="ant-checkbox-vertical">选项一</Checkbox>
@ -58,7 +58,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="Checkbox 多选框："
label="Checkbox 多选框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }} >
<Checkbox className="ant-checkbox-inline">选项一</Checkbox>
@ -67,7 +67,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="Radio 单选框："
label="Radio 单选框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 18 }} >
<RadioGroup defaultValue="b">

4
components/form/demo/form-in-modal.md
View File

@ -42,12 +42,12 @@ let Demo = React.createClass({
<Form horizontal form={this.props.form}>
<FormItem
{...formItemLayout}
label="用户名：">
label="用户名">
<Input {...getFieldProps('username', {})} type="text" autoComplete="off" />
</FormItem>
<FormItem
{...formItemLayout}
label="密码：">
label="密码">
<Input {...getFieldProps('password', {})} type="password" autoComplete="off" />
</FormItem>
</Form>

10
components/form/demo/horizontal-form.md
View File

@ -26,17 +26,17 @@ let Demo = React.createClass({
<Form horizontal onSubmit={this.handleSubmit}>
<FormItem
{...formItemLayout}
label="用户名：">
label="用户名">
<p className="ant-form-text" id="userName" name="userName">大眼萌 minion</p>
</FormItem>
<FormItem
{...formItemLayout}
label="密码：">
label="密码">
<Input type="password" {...getFieldProps('pass')} placeholder="请输入密码" />
</FormItem>
<FormItem
{...formItemLayout}
label="您的性别：">
label="您的性别">
<RadioGroup {...getFieldProps('gender', { initialValue: 'female' })}>
<Radio value="male">男的</Radio>
<Radio value="female">女的</Radio>
@ -44,13 +44,13 @@ let Demo = React.createClass({
</FormItem>
<FormItem
{...formItemLayout}
label="备注："
label="备注"
help="随便写点什么">
<Input type="textarea" placeholder="随便写" {...getFieldProps('remark')} />
</FormItem>
<FormItem
{...formItemLayout}
label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip> ：</span>}>
label={<span>卖身华府 <Tooltip title="我为秋香"><Icon type="question-circle-o" /></Tooltip></span>}>
<Checkbox {...getFieldProps('agreement')}>同意</Checkbox>
</FormItem>
<FormItem wrapperCol={{ span: 16, offset: 6 }} style={{ marginTop: 24 }}>

4
components/form/demo/inline-form.md
View File

@ -20,12 +20,12 @@ let Demo = React.createClass({
return (
<Form inline onSubmit={this.handleSubmit}>
<FormItem
label="账户：">
label="账户">
<Input placeholder="请输入账户名"
{...getFieldProps('userName')} />
</FormItem>
<FormItem
label="密码：">
label="密码">
<Input type="password" placeholder="请输入密码"
{...getFieldProps('password')} />
</FormItem>

10
components/form/demo/input-group.md
View File

@ -14,14 +14,14 @@ const Option = Select.Option;
ReactDOM.render(
<Form horizontal>
<FormItem
label="标签输入框："
label="标签输入框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}>
<Input addonBefore="Http://" defaultValue="mysite.com" id="site1" />
</FormItem>
<FormItem
label="标签输入框："
label="标签输入框"
labelCol={{ span: 6 }}
validateStatus="success"
wrapperCol={{ span: 16 }}>
@ -29,7 +29,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="select 标签输入框："
label="select 标签输入框"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}>
<InputGroup>
@ -46,7 +46,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="输入身份证："
label="输入身份证"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}>
<InputGroup>
@ -66,7 +66,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="电话号码："
label="电话号码"
labelCol={{ span: 6 }}
wrapperCol={{ span: 16 }}>
<InputGroup>

20
components/form/demo/mix.md
View File

@ -44,7 +44,7 @@ let Demo = React.createClass({
return (
<Form horizontal onSubmit={this.handleSubmit} >
<FormItem
label="InputNumber 数字输入框："
label="InputNumber 数字输入框"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}>
<InputNumber min={1} max={10} style={{ width: 100 }}
@ -53,7 +53,7 @@ let Demo = React.createClass({
</FormItem>
<FormItem
label="我是标题："
label="我是标题"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}>
<p className="ant-form-text" id="static" name="static">唧唧复唧唧木兰当户织呀</p>
@ -63,7 +63,7 @@ let Demo = React.createClass({
</FormItem>
<FormItem
label="Switch 开关："
label="Switch 开关"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
required>
@ -71,7 +71,7 @@ let Demo = React.createClass({
</FormItem>
<FormItem
label="Slider 滑动输入条："
label="Slider 滑动输入条"
labelCol={{ span: 8 }}
wrapperCol={{ span: 10 }}
required>
@ -79,7 +79,7 @@ let Demo = React.createClass({
</FormItem>
<FormItem
label="Select 选择器："
label="Select 选择器"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required>
@ -93,7 +93,7 @@ let Demo = React.createClass({
</FormItem>
<FormItem
label="级联选择："
label="级联选择"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required
@ -102,7 +102,7 @@ let Demo = React.createClass({
</FormItem>
<FormItem
label="DatePicker 日期选择框："
label="DatePicker 日期选择框"
labelCol={{ span: 8 }}
required>
<Col span="6">
@ -122,7 +122,7 @@ let Demo = React.createClass({
<FormItem
label="TimePicker 时间选择器："
label="TimePicker 时间选择器"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
required>
@ -130,7 +130,7 @@ let Demo = React.createClass({
</FormItem>
<FormItem
label="选项："
label="选项"
labelCol={{ span: 8 }}>
<RadioGroup {...getFieldProps('rg')}>
<RadioButton value="a">选项一</RadioButton>
@ -140,7 +140,7 @@ let Demo = React.createClass({
</FormItem>
<FormItem
label="logo图："
label="logo图"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
help="提示信息要长长长长长长长长长长长长长长">

10
components/form/demo/validate-basic.md
View File

@ -112,7 +112,7 @@ let BasicDemo = React.createClass({
<Form horizontal form={this.props.form}>
<FormItem
{...formItemLayout}
label="用户名："
label="用户名"
hasFeedback
help={isFieldValidating('name') ? '校验中...' : (getFieldError('name') || []).join(', ')}>
<Input {...nameProps} placeholder="实时校验，输入 JasonWood 看看" />
@ -120,14 +120,14 @@ let BasicDemo = React.createClass({
<FormItem
{...formItemLayout}
label="邮箱："
label="邮箱"
hasFeedback>
<Input {...emailProps} type="email" placeholder="onBlur 与 onChange 相结合" />
</FormItem>
<FormItem
{...formItemLayout}
label="密码："
label="密码"
hasFeedback>
<Input {...passwdProps} type="password" autoComplete="off"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
@ -135,7 +135,7 @@ let BasicDemo = React.createClass({
<FormItem
{...formItemLayout}
label="确认密码："
label="确认密码"
hasFeedback>
<Input {...rePasswdProps} type="password" autoComplete="off" placeholder="两次输入密码保持一致"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop} />
@ -143,7 +143,7 @@ let BasicDemo = React.createClass({
<FormItem
{...formItemLayout}
label="备注：">
label="备注">
<Input {...textareaProps} type="textarea" placeholder="随便写" id="textarea" name="textarea" />
</FormItem>

4
components/form/demo/validate-customized.md
View File

@ -145,7 +145,7 @@ let Demo = React.createClass({
<Col span="18">
<FormItem
{...formItemLayout}
label="密码：">
label="密码">
<Input {...passProps} type="password"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
autoComplete="off" id="pass"
@ -161,7 +161,7 @@ let Demo = React.createClass({
<Col span="18">
<FormItem
{...formItemLayout}
label="确认密码：">
label="确认密码">
<Input {...rePassProps} type="password"
onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
autoComplete="off" id="rePass"

16
components/form/demo/validate-other.md
View File

@ -110,7 +110,7 @@ let Demo = React.createClass({
<Form horizontal form={this.props.form}>
<FormItem
{...formItemLayout}
label="国籍：">
label="国籍">
<Select {...selectProps} placeholder="请选择国家" style={{ width: '100%' }}>
<Option value="china">中国</Option>
<Option value="use">美国</Option>
@ -122,7 +122,7 @@ let Demo = React.createClass({
<FormItem
{...formItemLayout}
label="喜欢的颜色：">
label="喜欢的颜色">
<Select {...multiSelectProps} multiple placeholder="请选择颜色" style={{ width: '100%' }}>
<Option value="red">红色</Option>
<Option value="orange">橙色</Option>
@ -134,7 +134,7 @@ let Demo = React.createClass({
<FormItem
{...formItemLayout}
label="性别：">
label="性别">
<RadioGroup {...radioProps}>
<Radio value="male">男</Radio>
<Radio value="female">女</Radio>
@ -144,7 +144,7 @@ let Demo = React.createClass({
<FormItem
{...formItemLayout}
label="兴趣爱好：">
label="兴趣爱好">
<Checkbox {...getFieldProps('eat', {
valuePropName: 'checked',
})}>吃饭饭</Checkbox>
@ -158,25 +158,25 @@ let Demo = React.createClass({
<FormItem
{...formItemLayout}
label="生日：">
label="生日">
<DatePicker {...birthdayProps} />
</FormItem>
<FormItem
{...formItemLayout}
label="选一个时间：">
label="选一个时间">
<TimePicker {...timeProps} />
</FormItem>
<FormItem
{...formItemLayout}
label="8~12间的质数：">
label="8~12间的质数">
<InputNumber {...primeNumberProps} min={8} max={12} />
</FormItem>
<FormItem
{...formItemLayout}
label="选择地址：">
label="选择地址">
<Cascader {...addressProps} options={address} />
</FormItem>

14
components/form/demo/validate-static.md
View File

@ -18,7 +18,7 @@ const FormItem = Form.Item;
ReactDOM.render(
<Form horizontal>
<FormItem
label="失败校验："
label="失败校验"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
validateStatus="error"
@ -27,7 +27,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="警告校验："
label="警告校验"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
validateStatus="warning">
@ -35,7 +35,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="校验中："
label="校验中"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
@ -45,7 +45,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="成功校验："
label="成功校验"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
@ -54,7 +54,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="警告校验："
label="警告校验"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
@ -63,7 +63,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="失败校验："
label="失败校验"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
hasFeedback
@ -73,7 +73,7 @@ ReactDOM.render(
</FormItem>
<FormItem
label="行内校验："
label="行内校验"
labelCol={{ span: 5 }}
help>
<Col span="6">

10
components/form/style/index.less
View File

@ -84,11 +84,13 @@ input[type="checkbox"] {
color: @label-color;
text-align: right;
vertical-align: middle;
padding-top: 7px;
padding-bottom: 7px;
padding: 7px 0;
&:lang(en) {
padding-right: 8px;
&:after {
content: ":";
margin: 0 8px 0 2px;
position: relative;
top: -0.5px;
}
}