mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
偏右
commit
cde72c55c7
31
components/form/demo/basic.md
Normal file
31
components/form/demo/basic.md
Normal file
@ -0,0 +1,31 @@
|
||||
# 基本使用
|
||||
|
||||
- order: 0
|
||||
|
||||
为了获得更好的排列，请将 `label` 标签和 `<input>`、`<textarea>`、`<select>` 控件包裹在 `.ant-form-item` 中。
|
||||
|
||||
`注`：`.ant-input` 类为 `<input>`、`<textarea>`、`<select>` 元素默认设置了 `width: 100%`。
|
||||
|
||||
为 `label` 标签添加 `required` 属性，表示该项必选。
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<form>
|
||||
<div class="ant-form-item">
|
||||
<label for="userName" required>用户名：</label>
|
||||
<input class="ant-input" type="text" id="userName" placeholder="请输入"/>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label for="password" required>密码：</label>
|
||||
<input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
|
||||
</div>
|
||||
<div class="ant-checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> 保持登录
|
||||
</label>
|
||||
</div>
|
||||
<input type="submit" class="ant-btn ant-btn-primary" value="确定" />
|
||||
<input type="submit" class="ant-btn" value="取消" />
|
||||
</form>
|
||||
````
|
||||
39
components/form/demo/disabled.md
Normal file
39
components/form/demo/disabled.md
Normal file
@ -0,0 +1,39 @@
|
||||
# 禁用状态
|
||||
|
||||
- order: 4
|
||||
|
||||
1) 单独为输入框设置 `disabled` 属性；
|
||||
|
||||
2) 为 `<fieldset>` 设置 `disabled` 属性，可以禁用 `<fieldset>` 中包含的所有控件。
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<h4>禁用的表单控件</h4>
|
||||
<input class="ant-input" type="text" value="我是禁用的" disabled>
|
||||
|
||||
<br />
|
||||
|
||||
<h4>禁用的fieldset</h4>
|
||||
<form>
|
||||
<fieldset disabled>
|
||||
<div class="ant-form-item">
|
||||
<label for="disabledTextInput">Input:</label>
|
||||
<input type="text" id="disabledTextInput" class="ant-input" placeholder="Disabled input">
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label for="disabledSelect">Select</label>
|
||||
<select id="disabledSelect" class="ant-input">
|
||||
<option>Disabled select</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="ant-checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> checkbox
|
||||
</label>
|
||||
</div>
|
||||
<button type="submit" class="ant-btn ant-btn-primary">Submit</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
````
|
||||
107
components/form/demo/form-controls.md
Normal file
107
components/form/demo/form-controls.md
Normal file
@ -0,0 +1,107 @@
|
||||
# 表单控件
|
||||
|
||||
- order: 3
|
||||
|
||||
展示所有支持的表单控件。
|
||||
|
||||
`注`： 输入框：只有正确设置了 type 属性的输入控件才能被赋予正确的样式。
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<form class="ant-form-horizontal">
|
||||
<div class="ant-form-item">
|
||||
<label class="col-6">输入框：</label>
|
||||
<div class="col-18">
|
||||
<input type="text" class="ant-input" placeholder="Please enter...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label class="col-6">文本域：</label>
|
||||
<div class="col-18">
|
||||
<textarea class="ant-input"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label class="col-6">下拉列表：</label>
|
||||
<div class="col-18">
|
||||
<select class="ant-input">
|
||||
<option>选项一</option>
|
||||
<option>选项二</option>
|
||||
<option>选项三</option>
|
||||
<option>选项四</option>
|
||||
<option>选线五</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label class="col-6">checkbox 复选框：</label>
|
||||
<div class="col-18">
|
||||
<div class="ant-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="apple"> Apple
|
||||
</label>
|
||||
</div>
|
||||
<!-- disabled checkbox -->
|
||||
<div class="ant-checkbox disabled">
|
||||
<label>
|
||||
<input type="checkbox" value="banana" disabled> Banana(disabled)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label class="col-6">内联的 checkbox：</label>
|
||||
<div class="col-18">
|
||||
<!-- 内联的checkbox -->
|
||||
<label class="ant-checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox1" value="Kevin"> Kevin
|
||||
</label>
|
||||
<label class="ant-checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox2" value="Bob"> Bob
|
||||
</label>
|
||||
<label class="ant-checkbox-inline">
|
||||
<input type="checkbox" id="inlineCheckbox3" value="Stuart"> Stuart
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label class="col-6">radio 单选框：</label>
|
||||
<div class="col-18">
|
||||
<div class="ant-radio">
|
||||
<label>
|
||||
<input type="radio" name="radios" id="optionsRadios1" value="option1" checked> Apple
|
||||
</label>
|
||||
</div>
|
||||
<!-- disabled radio -->
|
||||
<div class="ant-radio disabled">
|
||||
<label>
|
||||
<input type="radio" name="radios" id="optionsRadios3" value="option3" disabled> Banana(disabled)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label class="col-6">内联的 radio：</label>
|
||||
<div class="col-18">
|
||||
<!-- 内联的radio -->
|
||||
<label class="ant-radio-inline">
|
||||
<input type="radio" name="inlineRadios" id="inlineRadio1" value="Kevin"> Kevin
|
||||
</label>
|
||||
<label class="ant-radio-inline">
|
||||
<input type="radio" name="inlineRadios" id="inlineRadio2" value="Stuart"> Stuart
|
||||
</label>
|
||||
<label class="ant-radio-inline">
|
||||
<input type="radio" name="inlineRadios" id="inlineRadio3" value="Bob"> Bob
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label class="col-6" for="InputFile">头像：</label>
|
||||
<div class="col-18">
|
||||
<input type="file" id="InputFile" class="ant-upload">
|
||||
<p class="ant-form-explain">请选择一个文件</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
````
|
||||
62
components/form/demo/horizontal-form.md
Normal file
62
components/form/demo/horizontal-form.md
Normal file
@ -0,0 +1,62 @@
|
||||
# 水平排列的表单
|
||||
|
||||
- order: 1
|
||||
|
||||
为 `<form>` 标签添加 `.ant-form-horizontal` 类(这让 `.ant-form-item` 表现为栅格系统中的 `row`)，并结合使用我们提供的 [栅格系统](http://ant.design/components/layout/)，可以实现 label 标签和表单控件的水平排列。
|
||||
|
||||
如需将一行静态文本和 `<label>` 标签置于同一行，则只需为 `<p>` 标签添加 `.ant-form-text` 类即可。
|
||||
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<form class="ant-form-horizontal">
|
||||
<div class="ant-form-item">
|
||||
<label for="userName" class="col-6" required>用户名：</label>
|
||||
<div class="col-4">
|
||||
<p class="ant-form-text">大眼萌 minion</p>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<p class="ant-form-text">
|
||||
<a href="javascript:;">什么鬼？</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label for="password" class="col-6" required>密码：</label>
|
||||
<div class="col-18">
|
||||
<input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label class="col-6" required>您的性别：</label>
|
||||
<div class="col-18">
|
||||
<label class="ant-radio-inline">
|
||||
<input type="radio" name="radios" id="male-radio" value="male" checked> 男的
|
||||
</label>
|
||||
<label class="ant-radio-inline">
|
||||
<input type="radio" name="radios" id="female-radio" value="female"> 女的
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label for="password" class="col-6" required>备注：</label>
|
||||
<div class="col-18">
|
||||
<textarea class="ant-input" placeholder="随便写"></textarea>
|
||||
<p class="ant-form-explain">随便写点什么吧</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<div class="ant-checkbox col-18 col-offset-6">
|
||||
<label>
|
||||
<input type="checkbox"> 我是同意的
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-16 col-offset-6">
|
||||
<input type="submit" class="ant-btn ant-btn-primary" value="确定" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
````
|
||||
39
components/form/demo/inline-form.md
Normal file
39
components/form/demo/inline-form.md
Normal file
@ -0,0 +1,39 @@
|
||||
# 行内排列的表单
|
||||
|
||||
- order: 2
|
||||
|
||||
在**视口宽度大于等于 768px **时，你可以为 `<form>` 标签添加 `.ant-form-inline` 类可使其表现为 inline-block 级别的控件。
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<form class="ant-form-inline">
|
||||
<div class="ant-form-item">
|
||||
<label for="userName">账户：</label>
|
||||
<input class="ant-input" type="text" id="userName" placeholder="请输入"/>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label for="password">密码：</label>
|
||||
<input class="ant-input" type="text" id="password" placeholder="请输入密码"/>
|
||||
</div>
|
||||
<input type="submit" class="ant-btn ant-btn-primary" value="登录" />
|
||||
</form>
|
||||
|
||||
<br />
|
||||
|
||||
<form class="ant-form-inline">
|
||||
<div class="ant-form-item">
|
||||
<input class="ant-input" type="text" id="userName" placeholder="请输入账户名"/>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<input class="ant-input" type="text" id="password" placeholder="请输入密码"/>
|
||||
</div>
|
||||
<div class="ant-checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> 记住我
|
||||
</label>
|
||||
</div>
|
||||
<input type="submit" class="ant-btn ant-btn-primary" value="登录" />
|
||||
</form>
|
||||
|
||||
````
|
||||
58
components/form/demo/input-size.md
Normal file
58
components/form/demo/input-size.md
Normal file
@ -0,0 +1,58 @@
|
||||
# Input 尺寸
|
||||
|
||||
- order: 7
|
||||
|
||||
关于尺寸，我们为 `.ant-input` `.ant-input-group` 均提供了三种尺寸：大（-lg）、中(默认)、小（-sm），往类名后添加后缀即可。
|
||||
|
||||
但是在 `<form>` 表单里面，我们只使用**大尺寸**作为唯一的尺寸。
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<h4>input</h4>
|
||||
<!-- 大尺寸 -->
|
||||
<input class="ant-input ant-input-lg" type="text" id="userName" placeholder="大输入框"/>
|
||||
<br>
|
||||
<!-- 默认尺寸 -->
|
||||
<input class="ant-input" type="text" id="userName" placeholder="默认大小输入框"/>
|
||||
<br>
|
||||
<!-- 小尺寸 -->
|
||||
<input class="ant-input ant-input-sm" type="text" id="userName" placeholder="小输入框"/>
|
||||
|
||||
<h4>input-group</h4>
|
||||
<!-- 大尺寸 -->
|
||||
<div class="ant-input-group ant-input-group-lg">
|
||||
<input type="text" class="ant-input" placeholder="大输入框组合">
|
||||
<div class="ant-input-group-btn">
|
||||
<button class="input-btn" type="button">
|
||||
<span>.com</span>
|
||||
<i class="anticon anticon-caret-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<!-- 默认尺寸 -->
|
||||
<div class="ant-input-group">
|
||||
<input type="text" class="ant-input" placeholder="Search for...">
|
||||
<div class="ant-input-group-btn">
|
||||
<button class="input-btn" type="button">
|
||||
<span>.com</span>
|
||||
<i class="anticon anticon-caret-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<!-- 小尺寸 -->
|
||||
<div class="ant-input-group ant-input-group-sm">
|
||||
<input type="text" class="ant-input" placeholder="小输入框组合">
|
||||
<div class="ant-input-group-btn">
|
||||
<button class="input-btn" type="button">
|
||||
<span>.com</span>
|
||||
<i class="anticon anticon-caret-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
````
|
||||
98
components/form/demo/inputs.md
Normal file
98
components/form/demo/inputs.md
Normal file
@ -0,0 +1,98 @@
|
||||
# Input 输入框集合
|
||||
|
||||
- order: 6
|
||||
|
||||
使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的 Input 输入框。
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<form class="ant-form-horizontal">
|
||||
<div class="ant-form-item">
|
||||
<label class="col-6" for="site1">标签输入框：</label>
|
||||
<div class="col-16">
|
||||
<div class="ant-input-group">
|
||||
<span class="ant-input-group-addon" id="basic-addon1">Http://</span>
|
||||
<input type="text" id="site1" class="ant-input" value="mysite.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label class="col-6" for="site3">标签输入框：</label>
|
||||
<div class="col-16">
|
||||
<div class="ant-input-group">
|
||||
<span class="ant-input-group-addon" id="basic-addon3">Http://</span>
|
||||
<input type="text" class="ant-input" id="site3" value="mysite">
|
||||
<span class="ant-input-group-addon" id="basic-addon4">.com</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label class="col-6" for="site4">按钮式下拉输入框：</label>
|
||||
<div class="col-16">
|
||||
<div class="ant-input-group">
|
||||
<input type="text" class="ant-input" id="site4" placeholder="Search for...">
|
||||
<div class="ant-input-group-btn">
|
||||
<button class="input-btn" type="button">
|
||||
<span>.com</span>
|
||||
<i class="anticon anticon-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label class="col-6" for="site5">带按钮的输入框：</label>
|
||||
<div class="col-16">
|
||||
<div class="ant-input-group">
|
||||
<input type="text" class="ant-input" id="site5" placeholder="Search for...">
|
||||
<div class="ant-input-group-btn">
|
||||
<button class="input-btn" type="button">GO!</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item">
|
||||
<label class="col-6">输入身份证：</label>
|
||||
<div class="col-16">
|
||||
<div class="row">
|
||||
<div class="col-6 pdrg-8">
|
||||
<input class="ant-input" type="text" id="certNo1" />
|
||||
</div>
|
||||
<div class="col-6 pdrg-8">
|
||||
<input class="ant-input" type="text" id="certNo2" />
|
||||
</div>
|
||||
<div class="col-6 pdrg-8">
|
||||
<input class="ant-input" type="text" id="certNo3" />
|
||||
</div>
|
||||
<div class="col-6 pdrg-8">
|
||||
<input class="ant-input" type="text" id="certNo4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-form-item has-error">
|
||||
<label class="col-6">电话号码：</label>
|
||||
<div class="col-16">
|
||||
<div class="row">
|
||||
<div class="col-4 pdrg-8">
|
||||
<input class="ant-input" type="text" id="tel1" value="086" />
|
||||
</div>
|
||||
<div class="col-2 pdrg-8">
|
||||
<p class="ant-form-split">--</p>
|
||||
</div>
|
||||
<div class="col-6 pdrg-8">
|
||||
<input class="ant-input" type="text" id="tel2" />
|
||||
</div>
|
||||
<div class="col-6 pdrg-8">
|
||||
<input class="ant-input" type="text" id="tel3" />
|
||||
</div>
|
||||
<div class="col-6 pdrg-8">
|
||||
<input class="ant-input" type="text" id="tel4" />
|
||||
</div>
|
||||
<p class="ant-form-explain">请输入正确的电话号码</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
````
|
||||
108
components/form/demo/mix.md
Normal file
108
components/form/demo/mix.md
Normal file
@ -0,0 +1,108 @@
|
||||
# 表单组合
|
||||
|
||||
- order: 8
|
||||
|
||||
展示和表单相关的其他 ant-design 组件。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var Select = antd.Select;
|
||||
var Option = Select.Option;
|
||||
var InputNumber = antd.InputNumber;
|
||||
var Datepicker = antd.Datepicker;
|
||||
|
||||
|
||||
function handleSelectChange(value) {
|
||||
console.log('selected ' + value);
|
||||
}
|
||||
|
||||
function onChange(v){
|
||||
console.log('changed',v);
|
||||
}
|
||||
|
||||
React.render(
|
||||
<form className="ant-form-horizontal">
|
||||
<div className="ant-form-item">
|
||||
<label className="col-6" required>Input-Number:</label>
|
||||
<div className="col-6 pdrg-8">
|
||||
<InputNumber min={1} max={10} defaultValue={3} onChange={onChange} style={{width:100}}/>
|
||||
</div>
|
||||
<div className="col-3"><p className="ant-form-text"> 台机器</p></div>
|
||||
</div>
|
||||
<div className="ant-form-item">
|
||||
<label className="col-6" required><i className="anticon anticon-exclamation-circle"></i>我是标题:</label>
|
||||
<div className="col-7 pdrg-8">
|
||||
<p className="ant-form-text">唧唧复唧唧木兰当户织呀</p>
|
||||
</div>
|
||||
<div className="col-9">
|
||||
<p className="ant-form-text">
|
||||
<a href="javascript:;">链接文字</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-form-item">
|
||||
<label for="" className="col-6" required>Switch 开关:</label>
|
||||
<div className="col-10">
|
||||
<p className="ant-form-text">请填写 switch</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-form-item">
|
||||
<label for="" className="col-6" required>Slider 滑动输入条:</label>
|
||||
<div className="col-10">
|
||||
<p className="ant-form-text">请填写 slider</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-form-item">
|
||||
<label for="password" className="col-6" required>Select 选择器:</label>
|
||||
<div className="col-18">
|
||||
<Select value="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>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-form-item">
|
||||
<label for="" className="col-6" required>ant-radio:</label>
|
||||
<div className="col-10">
|
||||
<p className="ant-form-text">请填写 ant-design 的 radio</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-form-item">
|
||||
<label for="" className="col-6" required>ant-checkbox:</label>
|
||||
<div className="col-10">
|
||||
<p className="ant-form-text">请填写 ant-design 的 checkbox</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-form-item">
|
||||
<label for="" className="col-6" required>Datepicker:</label>
|
||||
<div className="col-8">
|
||||
<Datepicker value="" />
|
||||
</div>
|
||||
<div className="col-2">
|
||||
<p className="ant-form-split">--</p>
|
||||
</div>
|
||||
<div className="col-8">
|
||||
<Datepicker value="" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-form-item has-error">
|
||||
<label for="" className="col-6" required>Datepicker 校验:</label>
|
||||
<div className="col-8">
|
||||
<Datepicker value="" />
|
||||
</div>
|
||||
<div className="col-2">
|
||||
<p className="ant-form-split">--</p>
|
||||
</div>
|
||||
<div className="col-8">
|
||||
<Datepicker value="" />
|
||||
</div>
|
||||
<div className="col-19 col-offset-6">
|
||||
<p className="ant-form-explain">请输入正确选项</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
, document.getElementById('components-form-demo-mix'));
|
||||
````
|
||||
81
components/form/demo/validate.md
Normal file
81
components/form/demo/validate.md
Normal file
@ -0,0 +1,81 @@
|
||||
# 校验提示
|
||||
|
||||
- order: 5
|
||||
|
||||
我们为表单控件的校验状态定义了样式，共有三种校验状态类：
|
||||
|
||||
`.has-success` `.has-error` `.has-warning`, 分别代表校验成功、校验失败、有警告。
|
||||
|
||||
将以上三种校验状态类添加到这些控件的父级元素即可。
|
||||
|
||||
另外为输入框添加反馈图标，可以更好地反馈当前的校验状态，使用 `.has-feedback` 类包裹 input 输入框即可。
|
||||
|
||||
**注意**: 反馈图标只能使用在文本输入框 `<input class="ant-input">` 元素上。
|
||||
|
||||
---
|
||||
|
||||
````html
|
||||
<h4>校验提示</h4>
|
||||
<br />
|
||||
<div class="ant-form-item has-success">
|
||||
<label for="success">成功校验：</label>
|
||||
<input class="ant-input" type="text" id="success" value="我是正文"/>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item has-error">
|
||||
<label for="error">失败校验：</label>
|
||||
<input class="ant-input" type="text" id="error" value="无效选择"/>
|
||||
<div class="ant-form-explain">请输入数字和字母组合</div>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item has-warning">
|
||||
<label for="warning">警告校验：</label>
|
||||
<input class="ant-input" type="text" id="warning" value="前方高能预警"/>
|
||||
</div>
|
||||
|
||||
<h4>带图标的校验提示（水平排列的表单）</h4>
|
||||
<br />
|
||||
<form class="ant-form-horizontal">
|
||||
<div class="ant-form-item">
|
||||
<label class="col-5" for="validating">校验中：</label>
|
||||
<div class="col-12">
|
||||
<div class="has-feedback">
|
||||
<input class="ant-input" type="text" id="validating" value="我是被校验的内容"/>
|
||||
<i class="anticon anticon-loading"></i>
|
||||
</div>
|
||||
<div class="ant-form-explain">信息审核中...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item has-success">
|
||||
<label class="col-5" for="input1">成功校验：</label>
|
||||
<div class="col-12">
|
||||
<div class="has-feedback">
|
||||
<input class="ant-input" type="text" id="input1" value="我是正文"/>
|
||||
<i class="anticon anticon-check-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item has-error">
|
||||
<label class="col-5" for="input2">失败校验：</label>
|
||||
<div class="col-12">
|
||||
<div class="has-feedback">
|
||||
<input class="ant-input" type="text" id="input2" value="无效选择"/>
|
||||
<i class="anticon anticon-cross-circle"></i>
|
||||
</div>
|
||||
<div class="ant-form-explain">请输入数字和字母组合</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ant-form-item has-warning">
|
||||
<label class="col-5" for="input3">警告校验：</label>
|
||||
<div class="col-12">
|
||||
<div class="has-feedback">
|
||||
<input class="ant-input" type="text" id="input3" value="前方高能预警"/>
|
||||
<i class="anticon anticon-exclamation-circle"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
````
|
||||
27
components/form/index.md
Normal file
27
components/form/index.md
Normal file
@ -0,0 +1,27 @@
|
||||
# Form
|
||||
|
||||
- category: CSS
|
||||
- chinese: 表单
|
||||
- order: 3
|
||||
|
||||
---
|
||||
|
||||
具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
|
||||
|
||||
|
||||
### 表单
|
||||
|
||||
除了默认的排列方式，我们还为 `form` 提供了以下两种排列方式：
|
||||
|
||||
- 水平排列：`.ant-form-horizontal` 类可以实现 `label` 标签和表单控件的水平排列;
|
||||
- 行内排列：`.ant-form-inline` 类可使其表现为 inline-block 级别的控件。
|
||||
|
||||
**注**: `.ant-form-inline` 类只适用于**视口宽度大于等于 768px **的情形。
|
||||
|
||||
### 表单域
|
||||
|
||||
表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。
|
||||
|
||||
在这里，我们使用 `.ant-form-item` 类来表示表单域，它包含了一个标签和一个输入控件。
|
||||
|
||||
为了获得更好的排列，请将 `label` 标签和 `<input>`、`<textarea>`、`<select>` 控件包裹在 `.ant-form-item` 中。
|
||||
@ -42,7 +42,7 @@
|
||||
> .@{iconfont-css-prefix} {
|
||||
top: -1px;
|
||||
font-size: 12px;
|
||||
font-size: 10px \9; // ie8-9
|
||||
font-size: ~"10px \9"; // ie8-9
|
||||
.scale(0.83);
|
||||
|
||||
:root & {
|
||||
|
||||
@ -0,0 +1,259 @@
|
||||
@import "../mixins/index";
|
||||
|
||||
.reset-form();
|
||||
|
||||
label {
|
||||
position: relative;
|
||||
&[required]:before {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
left: ~"-5px \9"; // ie8-9
|
||||
content: "*";
|
||||
color: @label-required-color;
|
||||
font-family: SimSun;
|
||||
font-size: 12px;
|
||||
.translate3d(-10px; 0; 0);
|
||||
}
|
||||
|
||||
> .@{iconfont-css-prefix} {
|
||||
vertical-align: top;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Form items
|
||||
// You should wrap labels and controls in .@{css-prefix}form-item for optimum spacing
|
||||
.@{css-prefix}form-item {
|
||||
margin-bottom: @form-item-margin-bottom;
|
||||
|
||||
label {
|
||||
color: @label-color;
|
||||
text-align: right;
|
||||
padding-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Input styles
|
||||
.@{css-prefix}input {
|
||||
.input;
|
||||
}
|
||||
|
||||
//== Input type: with extra icon
|
||||
.has-feedback {
|
||||
.input-with-icon();
|
||||
}
|
||||
|
||||
//== Style for input-group
|
||||
.@{css-prefix}input-group {
|
||||
.input-group(~"@{css-prefix}input");
|
||||
}
|
||||
|
||||
// 表单下的输入框尺寸唯一: 大尺寸
|
||||
form {
|
||||
.@{css-prefix}input {
|
||||
height: @input-height-lg;
|
||||
font-size: 12px;
|
||||
padding: @input-padding-horizontal;
|
||||
}
|
||||
.has-feedback {
|
||||
.@{iconfont-css-prefix} {
|
||||
.square(@input-height-lg);
|
||||
line-height: @input-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
.@{css-prefix}input-group > .@{css-prefix}input,
|
||||
.@{css-prefix}input-group > .@{css-prefix}input-group-addon,
|
||||
.@{css-prefix}input-group > .@{css-prefix}input-group-btn > .input-btn {
|
||||
.input-lg();
|
||||
}
|
||||
|
||||
// input[type=file]
|
||||
.@{css-prefix}upload {
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// Radio & Checkbox
|
||||
.@{css-prefix}radio,
|
||||
.@{css-prefix}checkbox {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
height: @input-height-lg;
|
||||
|
||||
label {
|
||||
min-height: @line-height-computed;
|
||||
padding: 7px 0 7px 20px;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.@{css-prefix}radio input[type="radio"],
|
||||
.@{css-prefix}radio-inline input[type="radio"],
|
||||
.@{css-prefix}checkbox input[type="checkbox"],
|
||||
.@{css-prefix}checkbox-inline input[type="checkbox"] {
|
||||
position: absolute;
|
||||
margin-left: -20px;
|
||||
margin-top: 4px \9;
|
||||
}
|
||||
|
||||
.@{css-prefix}radio + .@{css-prefix}radio,
|
||||
.@{css-prefix}checkbox + .@{css-prefix}checkbox {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
// Radios and checkboxes on same line
|
||||
.@{css-prefix}radio-inline,
|
||||
.@{css-prefix}checkbox-inline {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 7px 20px;
|
||||
padding-right: 0!important;
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
&[disabled],
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
// These classes are used directly on <label>s
|
||||
.@{css-prefix}radio-inline,
|
||||
.@{css-prefix}checkbox-inline {
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
// These classes are used on elements with <label> descendants
|
||||
.@{css-prefix}radio,
|
||||
.@{css-prefix}checkbox {
|
||||
&.disabled,
|
||||
fieldset[disabled] & {
|
||||
label {
|
||||
cursor: @cursor-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form layout
|
||||
//== Horizontal Form
|
||||
.@{css-prefix}form-horizontal {
|
||||
.@{css-prefix}form-item {
|
||||
.make-row;
|
||||
}
|
||||
|
||||
.@{css-prefix}radio,
|
||||
.@{css-prefix}checkbox,
|
||||
.@{css-prefix}radio-inline,
|
||||
.@{css-prefix}checkbox-inline {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.@{css-prefix}radio,
|
||||
.@{css-prefix}checkbox {
|
||||
min-height: (@line-height-computed + (@input-padding-vertical-base + 1));
|
||||
}
|
||||
}
|
||||
|
||||
//== Inline Form
|
||||
// Attention: Inline form does only apply to within viewports that are at least 768px wide
|
||||
// TODO: 用 float 代替 inline-block
|
||||
.@{css-prefix}form-inline {
|
||||
&:extend(.clearfix all);
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.@{css-prefix}form-item {
|
||||
float: left;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
|
||||
label {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.@{css-prefix}input {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.@{css-prefix}form-text {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.has-feedback {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.@{css-prefix}radio,
|
||||
.@{css-prefix}checkbox {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
|
||||
label {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.@{css-prefix}radio input[type="radio"],
|
||||
.@{css-prefix}checkbox input[type="checkbox"] {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{css-prefix}form-horizontal, .@{css-prefix}form-inline {
|
||||
label {
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{css-prefix}form-text, .@{css-prefix}form-split {
|
||||
// min-height: (@line-height-computed + @font-size-base);
|
||||
margin: 0!important;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
font-size: 12px;
|
||||
height: @input-height-lg;
|
||||
}
|
||||
|
||||
.@{css-prefix}form-split {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Validation state
|
||||
.has-success {
|
||||
.form-control-validation(@success-color; @input-hover-border-color;);
|
||||
.@{css-prefix}input {
|
||||
border-color: @input-border-color;
|
||||
}
|
||||
}
|
||||
.has-warning {
|
||||
.form-control-validation(@warning-color; @warning-color;);
|
||||
}
|
||||
.has-error {
|
||||
.form-control-validation(@error-color; @error-color;);
|
||||
}
|
||||
.@{css-prefix}form-explain {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@ -14,3 +14,4 @@
|
||||
@import "steps";
|
||||
@import "breadcrumb";
|
||||
@import "inputNumber";
|
||||
@import "typography";
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
//== Typography
|
||||
|
||||
//** Headings: h1 h2 h3 h4 h5 h6
|
||||
//** Headings: h1 h2 h3 h4 h5 h6
|
||||
|
||||
|
||||
.pdrg-8 {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.pdlf-8 {
|
||||
padding-left: 8px;
|
||||
}
|
||||
@ -1,5 +1,15 @@
|
||||
@import "normalize";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||
}
|
||||
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// HTML & Body reset
|
||||
html, body {
|
||||
.square(100%);
|
||||
|
||||
102
style/mixins/form.less
Normal file
102
style/mixins/form.less
Normal file
@ -0,0 +1,102 @@
|
||||
.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
|
||||
.@{css-prefix}form-explain, .@{css-prefix}form-split {
|
||||
color: @text-color;
|
||||
}
|
||||
// 输入框的不同校验状态
|
||||
.@{css-prefix}input {
|
||||
border-color: @border-color;
|
||||
&:focus {
|
||||
border-color: @border-color;
|
||||
box-shadow: 0 0 3px tint(@border-color, 20%);
|
||||
}
|
||||
&:not([disabled]):hover {
|
||||
border-color: @border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.@{css-prefix}input-group-addon {
|
||||
color: @text-color;
|
||||
border-color: @border-color;
|
||||
background-color: @background-color;
|
||||
}
|
||||
|
||||
.has-feedback {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset form styles
|
||||
// -----------------------------
|
||||
// Based on Bootstrap framework
|
||||
.reset-form() {
|
||||
fieldset {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
font-size: (@font-size-base * 1.5);
|
||||
line-height: inherit;
|
||||
color: @legend-color;
|
||||
border: 0;
|
||||
border-bottom: 1px solid @legend-border-color;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
font-size: @font-size-base;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
.box-sizing(border-box);
|
||||
}
|
||||
|
||||
// Position radios and checkboxes better
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin: 2px 0 0;
|
||||
margin-top: 1px \9; // IE8-9
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Make range inputs behave like textual form controls
|
||||
input[type="range"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Make multiple select elements height not fixed
|
||||
select[multiple],
|
||||
select[size] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Focus for file, radio, and checkbox
|
||||
input[type="file"]:focus,
|
||||
input[type="radio"]:focus,
|
||||
input[type="checkbox"]:focus {
|
||||
outline: thin dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
// Adjust output element
|
||||
output {
|
||||
display: block;
|
||||
padding-top: 15px;
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
color: @input-color;
|
||||
}
|
||||
}
|
||||
@ -12,6 +12,7 @@
|
||||
// for common elements
|
||||
@import "button.less";
|
||||
@import "input.less";
|
||||
@import "form.less";
|
||||
|
||||
// Layout
|
||||
@import "grid.less";
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
// 待删除
|
||||
.ant-input(){
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -22,31 +23,45 @@
|
||||
}
|
||||
}
|
||||
|
||||
// size mixins for input
|
||||
.input-lg() {
|
||||
padding: @input-padding-lg;
|
||||
height: @input-height-lg;
|
||||
font-size: @input-font-size-lg;
|
||||
}
|
||||
|
||||
.input-sm() {
|
||||
padding: @input-padding-vertical-sm @input-padding-horizontal;
|
||||
height: @input-height-sm;
|
||||
font-size: @input-font-size-sm;
|
||||
}
|
||||
|
||||
// Basic style for input
|
||||
.input() {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: @input-padding-vertical-base @input-padding-horizontal;
|
||||
margin-right: 8px;
|
||||
width: 100%;
|
||||
height: @input-height-base;
|
||||
font-size: @input-font-size;
|
||||
line-height: @line-height-base;
|
||||
color: @input-color;
|
||||
background-color: @input-bg;
|
||||
background-image: none;
|
||||
border: 1px solid @input-border-color;
|
||||
border-radius: @input-border-radius;
|
||||
// Reset placeholder
|
||||
.placeholder();
|
||||
border-radius: @border-radius-base;
|
||||
.placeholder(); // Reset placeholder
|
||||
.transition(~"border @{duration-300} @{ease-in-out}, background @{duration-300} @{ease-in-out}, box-shadow @{duration-300} @{ease-in-out}");
|
||||
|
||||
&:not([disabled]):hover {
|
||||
&:hover {
|
||||
border-color: @input-hover-border-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@color-rgba: rgba(red(@input-focus-border-color), green(@input-focus-border-color), blue(@input-focus-border-color), .8);
|
||||
border-color: @input-focus-border-color;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 3px @color-rgba;
|
||||
box-shadow: 0 0 3px tint(@input-focus-border-color, 20%);
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
@ -54,6 +69,9 @@
|
||||
fieldset[disabled] & {
|
||||
background-color: @input-disabled-bg;
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
border-color: @input-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
@ -68,12 +86,172 @@
|
||||
|
||||
// Size
|
||||
&-lg {
|
||||
padding: @input-padding-lg;
|
||||
font-size: @input-font-size-lg;
|
||||
.input-lg();
|
||||
}
|
||||
|
||||
&-sm {
|
||||
padding: @input-padding-vertical-sm @input-padding-horizontal;
|
||||
font-size: @input-font-size-sm;
|
||||
.input-sm();
|
||||
}
|
||||
}
|
||||
|
||||
// Input with icons, you can define @height if you wish to change the input size
|
||||
.input-with-icon(@height: @input-height-base) {
|
||||
position: relative;
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
.square(@height);
|
||||
font-size: 14px;
|
||||
line-height: @height;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Input-group
|
||||
.input-group(@inputClass) {
|
||||
// define the button style for input-group
|
||||
@inputBtn: input-btn;
|
||||
|
||||
position: relative;
|
||||
display: table;
|
||||
border-collapse: separate;
|
||||
|
||||
// Undo padding and float of grid classes
|
||||
&[class*="col-"] {
|
||||
float: none;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
&-addon,
|
||||
&-btn,
|
||||
&-btn-vertical,
|
||||
.@{inputClass} {
|
||||
display: table-cell;
|
||||
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-addon,
|
||||
&-btn,
|
||||
&-btn-vertical {
|
||||
width: 1%;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.@{inputClass} {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
float: left;
|
||||
width: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&-addon {
|
||||
padding: @input-padding-vertical-base @input-padding-horizontal;
|
||||
font-size: @font-size-base;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
color: @input-color;
|
||||
text-align: center;
|
||||
background-color: #eee;
|
||||
border: 1px solid @input-border-color;
|
||||
border-radius: @border-radius-base;
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.@{inputBtn} {
|
||||
.btn();
|
||||
.button-size(@input-padding-vertical-base @input-padding-horizontal; @font-size-base; @border-radius-base);
|
||||
.button-variant(@input-color; #eee; @input-border-color);
|
||||
|
||||
&:hover {
|
||||
.button-color(lighten(@input-color, 30%, 'relative'); #eee; @input-border-color);
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
.button-color(lighten(@input-color, 20%, 'relative'); #eee; @input-border-color);
|
||||
}
|
||||
|
||||
.@{iconfont-css-prefix} {
|
||||
line-height: 1;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-btn {
|
||||
position: relative;
|
||||
|
||||
> .@{inputBtn} {
|
||||
position: relative;
|
||||
+ .@{inputBtn} {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Negative margin to only have a 1px border between the two
|
||||
&:first-child {
|
||||
> .@{inputBtn} {
|
||||
margin-right: -1px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
> .@{inputBtn} {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reset rounded corners
|
||||
.@{inputClass}:first-child,
|
||||
&-addon:first-child,
|
||||
&-btn:first-child > .@{inputBtn},
|
||||
&-btn:last-child > .@{inputBtn}:not(:last-child):not(.dropdown-toggle) {
|
||||
border-bottom-right-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
&-addon:first-child {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.@{inputClass}:last-child,
|
||||
&-addon:last-child,
|
||||
&-btn:last-child > .@{inputBtn},
|
||||
&-btn:first-child > .@{inputBtn}:not(:first-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
&-addon:last-child {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
// Sizing options
|
||||
&-lg > .@{inputClass},
|
||||
&-lg > &-addon,
|
||||
&-lg > &-btn > .@{inputBtn} {
|
||||
.input-lg();
|
||||
}
|
||||
|
||||
&-sm > .@{inputClass},
|
||||
&-sm > &-addon,
|
||||
&-sm > &-btn > .@{inputBtn} {
|
||||
.input-sm();
|
||||
}
|
||||
|
||||
&-sm > &-btn > .@{inputBtn} {
|
||||
margin-top: ~"-2px \9";
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
// prefix class
|
||||
// Prefix classname
|
||||
@css-prefix : ant-;
|
||||
|
||||
// color
|
||||
// Color
|
||||
@primary-color : #2db7f5;
|
||||
@success-color : #87d068;
|
||||
@error-color : #ff6600;
|
||||
@warning-color : #fac450;
|
||||
|
||||
// ------ Base & Require ------
|
||||
@body-background : #fff;
|
||||
@ -12,6 +15,8 @@
|
||||
@text-color : #666;
|
||||
@font-size-base : 12px;
|
||||
@line-height-base : 1.5;
|
||||
@line-height-computed: floor((@font-size-base * @line-height-base));
|
||||
@border-radius-base : 6px;
|
||||
|
||||
// ICONFONT
|
||||
@iconfont-css-prefix : anticon;
|
||||
@ -36,7 +41,7 @@
|
||||
@ease-in-circ : cubic-bezier(0.6, 0.04, 0.98, 0.34);
|
||||
@ease-in-out-circ : cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
|
||||
// BUTTONS
|
||||
// Buttons
|
||||
@btn-font-weight : normal;
|
||||
|
||||
@btn-primary-color : #fff;
|
||||
@ -69,9 +74,6 @@
|
||||
@btn-circle-size-lg : 32px;
|
||||
@btn-circle-size-sm : 22px;
|
||||
|
||||
// Border
|
||||
@border-radius-base : 6px;
|
||||
|
||||
// Media queries breakpoints
|
||||
// Extra small screen / phone
|
||||
@screen-xs : 480px;
|
||||
@ -107,7 +109,9 @@
|
||||
// Legend
|
||||
@legend-color : #222;
|
||||
@legend-border-color : #e5e5e5;
|
||||
|
||||
// Label
|
||||
@label-required-color : #F60;
|
||||
@label-color: #999;
|
||||
// Input
|
||||
@input-height-base: 28px;
|
||||
@input-height-lg: 32px;
|
||||
@ -123,8 +127,6 @@
|
||||
@input-border-color : #d9d9d9;
|
||||
@input-bg : #fff;
|
||||
|
||||
@input-border-radius : @border-radius-base;
|
||||
|
||||
@input-font-size-lg : 14px;
|
||||
@input-font-size : @font-size-base;
|
||||
@input-font-size-sm : @font-size-base;
|
||||
@ -132,3 +134,5 @@
|
||||
@input-hover-border-color : #23c0fa;
|
||||
@input-focus-border-color : @primary-color;
|
||||
@input-disabled-bg : #f3f5f7;
|
||||
|
||||
@form-item-margin-bottom : 24px;
|
||||
Loading…
Reference in New Issue
Block a user