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` 属性；

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">

118
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 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="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">输入身份证：</label>
<div class="col-16">
<div class="ant-input-group">
<div class="col-6">
<input class="ant-input" type="text" id="certNo1" />
</div>
<div class="col-6">
<input class="ant-input" type="text" id="certNo2" />
</div>
<div class="col-6">
<input class="ant-input" type="text" id="certNo3" />
</div>
<div class="col-6">
<input class="ant-input" type="text" id="certNo4" />
<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 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">
<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-2">
<p class="ant-form-split">--</p>
<div className="col-6">
<input className="ant-input" type="text" id="certNo2" />
</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-6">
<input className="ant-input" type="text" id="certNo3" />
</div>
<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 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,
&-addon:last-child,
&-btn .@{btnclass}{
&-addon:last-child {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
// Sizing options
&-lg .@{inputClass},
&-lg > &-addon,
&-lg > &-btn .@{btnclass} {
&-lg > &-addon {
.input-lg();
}
&-sm .@{inputClass},
&-sm > &-addon,
&-sm > &-btn .@{btnclass} {
&-sm > &-addon {
.input-sm();
}
&-sm > &-btn .@{btnclass} {
margin-top: ~"-2px \9";
}
}

18
webpack.config.js
View File

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