mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-29 13:47:02 +08:00
Code Issues Actions 13 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-08 10:17:40 +08:00
commit ef3eca08f9
13 changed files with 82 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/form/demo/basic.md
View File

@ -1,31 +0,0 @@
# 基本使用
- 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>
````

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

@ -1,6 +1,6 @@
# 禁用状态
- order: 4
- order: 3
1) 单独为输入框设置 `disabled` 属性；
@ -10,29 +10,46 @@
````html
<h4>禁用的表单控件</h4>
<input class="ant-input" type="text" value="我是禁用的" disabled>
<form class="ant-form-horizontal">
<div class="ant-form-item">
<label class="col-5">禁用的输入框：</label>
<div class="col-12">
<input class="ant-input" type="text" value="我是禁用的" disabled>
</div>
</div>
</form>
<br />
<h4>禁用的fieldset</h4>
<form>
<h4>禁用的 fieldset</h4>
<form class="ant-form-horizontal">
<fieldset disabled>
<div class="ant-form-item">
<label for="disabledTextInput">Input:</label>
<input type="text" id="disabledTextInput" class="ant-input" placeholder="Disabled input">
<label for="disabledTextInput" class="col-5">Input:</label>
<div class="col-12">
<input type="text" id="disabledTextInput" class="ant-input" placeholder="Disabled input">
</div>
</div>
<div class="ant-form-item">
<label for="disabledSelect">Select</label>
<select id="disabledSelect" class="ant-input">
<option>Disabled select</option>
</select>
<label for="disabledSelect" class="col-5">Select:</label>
<div class="col-12">
<select id="disabledSelect" class="ant-input">
<option>Disabled select</option>
</select>
</div>
</div>
<div class="ant-checkbox">
<label>
<input type="checkbox"> checkbox
</label>
<div class="ant-form-item">
<div class="ant-checkbox col-14 col-offset-5">
<label>
<input type="checkbox"> checkbox
</label>
</div>
</div>
<div class="row">
<div class="col-14 col-offset-5">
<input type="submit" class="ant-btn ant-btn-primary" value="确定">
</div>
</div>
<button type="submit" class="ant-btn ant-btn-primary">Submit</button>
</fieldset>
</form>

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

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

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

@ -1,11 +1,12 @@
# 水平排列的表单
- order: 1
- order: 0
为 `<form>` 标签添加 `.ant-form-horizontal` 类(这让 `.ant-form-item` 表现为栅格系统中的 `row`)，并结合使用我们提供的 [栅格系统](http://ant.design/components/layout/)，可以实现 label 标签和表单控件的水平排列。
如需将一行静态文本和 `<label>` 标签置于同一行，则只需为 `<p>` 标签添加 `.ant-form-text` 类即可。
为 `label` 标签添加 `required` 属性，表示该项必选。
---
@ -24,13 +25,13 @@
</div>
<div class="ant-form-item">
<label for="password" class="col-6" required>密码：</label>
<div class="col-18">
<div class="col-14">
<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">
<div class="col-14">
<label class="ant-radio-inline">
<input type="radio" name="radios" id="male-radio" value="male" checked> 男的
</label>
@ -41,13 +42,13 @@
</div>
<div class="ant-form-item">
<label for="password" class="col-6" required>备注：</label>
<div class="col-18">
<div class="col-14">
<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">
<div class="ant-checkbox col-14 col-offset-6">
<label>
<input type="checkbox"> 我是同意的
</label>

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

@ -1,6 +1,6 @@
# 行内排列的表单
- order: 2
- order: 1
在**视口宽度大于等于 768px **时，你可以为 `<form>` 标签添加 `.ant-form-inline` 类可使其表现为 inline-block 级别的控件。

53
components/form/demo/input-size.md
View File

@ -1,57 +1,24 @@
# Input 尺寸
- order: 7
- order: 6
关于尺寸，我们为 `.ant-input` `.ant-input-group` 均提供了三种尺寸：大（-lg）、中(默认)、小（-sm），往类名后添加后缀即可。
我们为定义了 `.ant-input` 类的输入框提供了三种尺寸：大（-lg）、中(默认)、小（-sm），往类名添加以上后缀即可。
但是在 `<form>` 表单里面，我们只使用**大尺寸**作为唯一的尺寸。
但是在 `<form>` 表单里面，我们只使用**大尺寸**， 即高度为 **32px**，作为唯一的尺寸。
---
````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 class="row">
<div class="col-6 pdrg-8">
<input class="ant-input ant-input-lg" type="text" id="largeInput" placeholder="大尺寸"/>
</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 class="col-6 pdrg-8">
<input class="ant-input" type="text" id="defaultInput" placeholder="默认尺寸"/>
</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 class="col-6 pdrg-8">
<input class="ant-input ant-input-sm" type="text" id="smallInput" placeholder="小尺寸"/>
</div>
</div>

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

@ -1,6 +1,6 @@
# Input 输入框集合
- order: 6
- order: 5
使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的 Input 输入框。

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

@ -1,8 +1,8 @@
# 表单组合
- order: 8
- order: 7
展示和表单相关的其他 ant-design 组件。
集中营，展示和表单相关的其他 ant-design 组件。
---
@ -78,25 +78,25 @@ React.render(
</div>
<div className="ant-form-item">
<label for="" className="col-6" required>Datepicker:</label>
<div className="col-8">
<div className="col-7">
<Datepicker value="" />
</div>
<div className="col-2">
<p className="ant-form-split">--</p>
</div>
<div className="col-8">
<div className="col-7">
<Datepicker value="" />
</div>
</div>
<div className="ant-form-item has-error">
<label for="" className="col-6" required>Datepicker 校验:</label>
<div className="col-8">
<div className="col-7">
<Datepicker value="" />
</div>
<div className="col-2">
<p className="ant-form-split">--</p>
</div>
<div className="col-8">
<div className="col-7">
<Datepicker value="" />
</div>
<div className="col-19 col-offset-6">

34
components/form/demo/validate.md
View File

@ -1,6 +1,6 @@
# 校验提示
- order: 5
- order: 4
我们为表单控件的校验状态定义了样式，共有三种校验状态类：
@ -15,23 +15,23 @@
---
````html
<h4>校验提示</h4>
<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>
<form class="ant-form-horizontal">
<div class="ant-form-item has-error">
<label for="error" class="col-5">失败校验：</label>
<div class="col-12">
<input class="ant-input" type="text" id="error" value="无效选择"/>
<div class="ant-form-explain">请输入数字和字母组合</div>
</div>
</div>
<div class="ant-form-item has-warning">
<label for="warning" class="col-5">警告校验：</label>
<div class="col-12">
<input class="ant-input" type="text" id="warning" value="前方高能预警"/>
</div>
</div>
</form>
<h4>带图标的校验提示（水平排列的表单）</h4>
<br />

2
components/form/index.md
View File

@ -11,7 +11,7 @@
### 表单
除了默认的排列方式，我们还为 `form` 提供了以下两种排列方式：
我们为 `form` 提供了以下两种排列方式：
- 水平排列：`.ant-form-horizontal` 类可以实现 `label` 标签和表单控件的水平排列;
- 行内排列：`.ant-form-inline` 类可使其表现为 inline-block 级别的控件。

6
style/components/form.less
View File

@ -52,7 +52,7 @@ label {
form {
.@{css-prefix}input {
height: @input-height-lg;
font-size: 12px;
font-size: @font-size-base;
padding: @input-padding-horizontal;
}
.has-feedback {
@ -65,7 +65,9 @@ form {
.@{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();
height: @input-height-lg;
font-size: @font-size-base;
padding: @input-padding-horizontal;
}
// input[type=file]

2
style/mixins/form.less
View File

@ -41,7 +41,7 @@
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: (@font-size-base * 1.5);
font-size: 14px;
line-height: inherit;
color: @legend-color;
border: 0;

4
style/themes/default/custom.less
View File

@ -107,8 +107,8 @@
// Form
// --------------------------------
// Legend
@legend-color : #222;
@legend-border-color : #e5e5e5;
@legend-color : #999;
@legend-border-color : #d9d9d9;
// Label
@label-required-color : #F60;
@label-color: #999;