mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
afc163 2015-07-21 15:19:07 +08:00
commit 22a44ff32a
10 changed files with 130 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
# 禁用状态 # 禁用状态
- order: 3 - order: 2
1) 单独为输入框设置 `disabled` 属性； 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> <label for="password" className="col-6" required>备注：</label>
<div className="col-14"> <div className="col-14">
<textarea className="ant-input" placeholder="随便写"></textarea> <textarea className="ant-input" placeholder="随便写"></textarea>
<p className="ant-form-explain">随便写点什么</p>
</div> </div>
</div> </div>
<div className="ant-form-item ant-form-item-compact"> <div className="ant-form-item ant-form-item-compact">

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

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

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

@ -79,21 +79,6 @@ React.render(
</Select> </Select>
</div> </div>
</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"> <div className="ant-form-item">
<label for="" className="col-6" required>Datepicker:</label> <label for="" className="col-6" required>Datepicker:</label>
<div className="col-6"> <div className="col-6">

4
index.js
View File

@ -29,7 +29,3 @@ var antd = {
module.exports = antd; module.exports = antd;
antd.version = require('./package.json').version; 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... //== Style for input-group: input with label, with button or dropdown...
.@{css-prefix}input-group { .@{css-prefix}input-group {
.input-group(~"@{css-prefix}input"; @btnClass) .input-group(~"@{css-prefix}input");
} }
// Radio && Checkbox // Radio && Checkbox
@ -122,11 +122,43 @@ form {
} }
.@{css-prefix}input, .@{css-prefix}input,
.@{css-prefix}input-group .@{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-addon {
.@{css-prefix}input-group .@{css-prefix}input-group-btn .@{btnClass} {
height: @input-height-lg; height: @input-height-lg;
font-size: @font-size-base; 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] // input[type=file]

2
style/components/inputNumber.less
View File

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

37
style/mixins/input.less
View File

@ -99,7 +99,7 @@
} }
// label input // label input
.input-group(@inputClass; @btnclass) { .input-group(@inputClass) {
position: relative; position: relative;
display: table; display: table;
border-collapse: separate; border-collapse: separate;
@ -116,7 +116,7 @@
} }
&-addon, &-addon,
&-btn, &-wrap,
> .@{inputClass} { > .@{inputClass} {
display: table-cell; display: table-cell;
@ -126,7 +126,7 @@
} }
&-addon, &-addon,
&-btn { &-wrap {
width: 1%; width: 1%;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; vertical-align: middle;
@ -152,24 +152,6 @@
border-radius: @border-radius-base; 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 // Reset rounded corners
> .@{inputClass}:first-child, > .@{inputClass}:first-child,
&-addon:first-child { &-addon:first-child {
@ -185,26 +167,19 @@
} }
> .@{inputClass}:last-child, > .@{inputClass}:last-child,
&-addon:last-child, &-addon:last-child {
&-btn .@{btnclass}{
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-top-left-radius: 0; border-top-left-radius: 0;
} }
// Sizing options // Sizing options
&-lg .@{inputClass}, &-lg .@{inputClass},
&-lg > &-addon, &-lg > &-addon {
&-lg > &-btn .@{btnclass} {
.input-lg(); .input-lg();
} }
&-sm .@{inputClass}, &-sm .@{inputClass},
&-sm > &-addon, &-sm > &-addon {
&-sm > &-btn .@{btnclass} {
.input-sm(); .input-sm();
} }
&-sm > &-btn .@{btnclass} {
margin-top: ~"-2px \9";
}
} }

18
webpack.config.js
View File

@ -17,12 +17,24 @@ module.exports = {
output: { output: {
path: path.join(process.cwd(), 'dist'), path: path.join(process.cwd(), 'dist'),
filename: '[name].js' filename: '[name].js',
library: 'antd',
libraryTarget: 'umd'
}, },
externals: { externals: {
react: "React", 'react': {
jquery:"jQuery" root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react'
},
'jquery': {
root: 'jQuery',
commonjs2: 'jquery',
commonjs: 'jquery',
amd: 'jquery'
}
}, },
module: { module: {