GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of github.com:ant-design/ant-design

pull/57/head
afc163 9 years ago
parent
0ee4a5b49a dac670a5c2
commit
22a44ff32a
10 changed files with 127 additions and 106 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components/form/demo/disabled.md
  2. 2
      components/form/demo/form-controls.md
  3. 1
      components/form/demo/horizontal-form.md
  4. 112
      components/form/demo/inputs.md
  5. 15
      components/form/demo/mix.md
  6. 4
      index.js
  7. 40
      style/components/form.less
  8. 2
      style/components/inputNumber.less
  9. 37
      style/mixins/input.less
  10. 18
      webpack.config.js

2
components/form/demo/disabled.md
View File

@ -1,6 +1,6 @@
# 禁用状态
- order: 3
- order: 2
1) 单独为输入框设置 `disabled` 属性；

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

@ -1,6 +1,6 @@
# 表单控件
- order: 2
- order: 3
展示所有支持的表单控件。

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

@ -44,6 +44,7 @@ React.render(
<label for="password" className="col-6" required>备注：</label>
<div className="col-14">
<textarea className="ant-input" placeholder="随便写"></textarea>
<p className="ant-form-explain">随便写点什么</p>
</div>
</div>
<div className="ant-form-item ant-form-item-compact">

112
components/form/demo/inputs.md
View File

@ -2,79 +2,99 @@
- order: 5
带标签的输入框：使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` `.ant-input-group-btn` 类可以创建带标签、按钮的 Input 输入框。
带标签的输入框：使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的输入框。
输入框组合：`.ant-inputs` 类由多个 `.ant-inputs-item` 组成，使多个 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" />
````jsx
var Select = antd.Select;
var Option = Select.Option;
React.render(
<form className="ant-form-horizontal">
<div className="ant-form-item">
<label className="col-6" for="site1">标签输入框：</label>
<div className="col-16">
<div className="ant-input-group">
<span className="ant-input-group-addon" id="basic-addon1">Http://</span>
<input type="text" id="site1" className="ant-input" value="mysite.com" />
</div>
</div>
</div>
<div className="ant-form-item">
<label className="col-6" for="site3">标签输入框：</label>
<div className="col-16">
<div className="ant-input-group">
<span className="ant-input-group-addon" id="basic-addon3">Http://</span>
<input type="text" className="ant-input" id="site3" value="mysite" />
<span className="ant-input-group-addon" id="basic-addon4">.com</span>
</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 className="ant-form-item">
<label className="col-6" for="site4">select 标签输入框：</label>
<div className="col-16">
<div className="ant-input-group">
<input type="text" className="ant-input" id="site4" placeholder="www.mysite" />
<div className="ant-input-group-wrap">
<Select value=".com" style={{width:65}}>
<Option value=".com">.com</Option>
<Option value=".jp">.jp</Option>
<Option value=".cn">.cn</Option>
<Option value=".org">.org</Option>
</Select>
</div>
</div>
</div>
</div>
<div class="ant-form-item">
<label class="col-6">输入身份证：</label>
<div class="col-16">
<div class="ant-input-group">
<div class="col-6">
<input class="ant-input" type="text" id="certNo1" />
<div className="ant-form-item">
<label className="col-6">输入身份证：</label>
<div className="col-16">
<div className="ant-input-group">
<div className="col-6">
<input className="ant-input" type="text" id="certNo1" />
</div>
<div class="col-6">
<input class="ant-input" type="text" id="certNo2" />
<div className="col-6">
<input className="ant-input" type="text" id="certNo2" />
</div>
<div class="col-6">
<input class="ant-input" type="text" id="certNo3" />
<div className="col-6">
<input className="ant-input" type="text" id="certNo3" />
</div>
<div class="col-6">
<input class="ant-input" type="text" id="certNo4" />
<div className="col-6">
<input className="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">
<input class="ant-input" type="text" id="tel1" value="086" />
<div className="ant-form-item has-error">
<label className="col-6">电话号码：</label>
<div className="col-16">
<div className="row">
<div className="col-4">
<input className="ant-input" type="text" id="tel1" value="086" />
</div>
<div class="col-2">
<p class="ant-form-split">--</p>
<div className="col-2">
<p className="ant-form-split">--</p>
</div>
<div class="col-18">
<div class="ant-input-group">
<div class="col-8">
<input class="ant-input" type="text" id="tel1" />
<div className="col-18">
<div className="ant-input-group">
<div className="col-8">
<input className="ant-input" type="text" id="tel1" />
</div>
<div class="col-8">
<input class="ant-input" type="text" id="tel2" />
<div className="col-8">
<input className="ant-input" type="text" id="tel2" />
</div>
<div class="col-8">
<input class="ant-input" type="text" id="tel3" />
<div className="col-8">
<input className="ant-input" type="text" id="tel3" />
</div>
</div>
</div>
</div>
<p class="ant-form-explain">请输入正确的电话号码</p>
<p className="ant-form-explain">请输入正确的电话号码</p>
</div>
</div>
</form>
, document.getElementById('components-form-demo-inputs'));
````

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

@ -79,21 +79,6 @@ React.render(
</Select>
</div>
</div>
<div className="ant-form-item">
<label className="col-6" for="site4">按钮式下拉输入框:</label>
<div className="col-16">
<div className="ant-input-group">
<input type="text" className="ant-input" id="site4" placeholder="Search for..." />
<div className="ant-input-group-btn">
<Dropdown overlay={menu}>
<button className="ant-btn ant-btn-menu">
.com <i className="anticon anticon-down"></i>
</button>
</Dropdown>
</div>
</div>
</div>
</div>
<div className="ant-form-item">
<label for="" className="col-6" required>Datepicker:</label>
<div className="col-6">

4
index.js
View File

@ -29,7 +29,3 @@ var antd = {
module.exports = antd;
antd.version = require('./package.json').version;
if (typeof window !== undefined) {
window.antd = antd;
}

40
style/components/form.less
View File

@ -34,7 +34,7 @@ label {
//== Style for input-group: input with label, with button or dropdown...
.@{css-prefix}input-group {
.input-group(~"@{css-prefix}input"; @btnClass)
.input-group(~"@{css-prefix}input");
}
// Radio && Checkbox
@ -122,11 +122,43 @@ form {
}
.@{css-prefix}input,
.@{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 .@{btnClass} {
.@{css-prefix}input-group .@{css-prefix}input-group-addon {
height: @input-height-lg;
font-size: @font-size-base;
padding: @input-padding-horizontal;
padding: 6px 7px;
}
// Input combined with select
.@{css-prefix}input-group {
.@{selectPrefixCls}-selection {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
&:hover {
border-color: #d9d9d9;
}
}
.@{selectPrefixCls}-selection--single {
margin-left: -1px;
height: @input-height-lg;
background-color: #eee;
.@{selectPrefixCls}-selection__rendered {
padding-left: 8px;
padding-right: 25px;
line-height: 32px;
}
}
.@{selectPrefixCls}-arrow {
right: 8px;
height: 32px;
line-height: 32px;
width: auto;
}
.@{selectPrefixCls}-open .@{selectPrefixCls}-selection {
border-color: #d9d9d9;
box-shadow: none;
}
}
// input[type=file]

2
style/components/inputNumber.less
View File

@ -109,7 +109,7 @@
.handler-disabled() {
opacity: 0.72;
color: #ccc;
color: #ccc!important;
cursor: default;
&:hover {
color: #ccc;

37
style/mixins/input.less
View File

@ -99,7 +99,7 @@
}
// label input
.input-group(@inputClass; @btnclass) {
.input-group(@inputClass) {
position: relative;
display: table;
border-collapse: separate;
@ -116,7 +116,7 @@
}
&-addon,
&-btn,
&-wrap,
> .@{inputClass} {
display: table-cell;
@ -126,7 +126,7 @@
}
&-addon,
&-btn {
&-wrap {
width: 1%;
white-space: nowrap;
vertical-align: middle;
@ -152,24 +152,6 @@
border-radius: @border-radius-base;
}
.@{btnclass} {
border-radius: @border-radius-base;
.button-variant(@input-color; #eee; @input-border-color);
margin-left: -1px;
&:hover {
.button-color(@input-color; tint(#eee, 20%); @input-border-color);
}
&:active, &.active {
.button-color(@input-color; shade(#eee, 5%); @input-border-color);
}
.@{iconfont-css-prefix} {
line-height: 1;
margin-left: 8px;
}
}
// Reset rounded corners
> .@{inputClass}:first-child,
&-addon:first-child {
@ -185,26 +167,19 @@
}
> .@{inputClass}:last-child,