test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-04 04:58:55 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

update form demo

Browse Source
This commit is contained in:
simaQ 2015-07-17 15:12:48 +08:00
parent 36fece79e5
commit 7172311c5c
5 changed files with 43 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,9 +44,9 @@
</select> </select>
</div> </div>
</div> </div>
<div class="ant-form-item"> <div class="ant-form-item ant-form-item-compact">
<div class="ant-checkbox col-14 col-offset-5"> <div class="col-14 col-offset-5">
<label> <label class="ant-checkbo-inline">
<input type="checkbox"> checkbox <input type="checkbox"> checkbox
</label> </label>
</div> </div>

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

@ -34,23 +34,19 @@
</select> </select>
</div> </div>
</div> </div>
<div class="ant-form-item"> <div class="ant-form-item ant-form-item-compact">
<label class="col-6">checkbox 复选框：</label> <label class="col-6">checkbox 复选框：</label>
<div class="col-18"> <div class="col-18">
<div> <label class="ant-checkbox-vertical">
<label> <input type="checkbox" value="apple"> Apple
<input type="checkbox" value="apple"> Apple </label>
</label>
</div>
<!-- disabled checkbox --> <!-- disabled checkbox -->
<div> <label class="ant-checkbox-vertical">
<label> <input type="checkbox" value="banana" disabled> Banana(disabled)
<input type="checkbox" value="banana" disabled> Banana(disabled) </label>
</label>
</div>
</div> </div>
</div> </div>
<div class="ant-form-item"> <div class="ant-form-item ant-form-item-compact">
<label class="col-6">内联的 checkbox：</label> <label class="col-6">内联的 checkbox：</label>
<div class="col-18"> <div class="col-18">
<!-- 内联的checkbox --> <!-- 内联的checkbox -->
@ -65,23 +61,19 @@
</label> </label>
</div> </div>
</div> </div>
<div class="ant-form-item"> <div class="ant-form-item ant-form-item-compact">
<label class="col-6">radio 单选框：</label> <label class="col-6">radio 单选框：</label>
<div class="col-18"> <div class="col-18">
<div> <label class="ant-radio-vertical">
<label> <input type="radio" name="radios" id="optionsRadios1" value="option1" checked> Apple
<input type="radio" name="radios" id="optionsRadios1" value="option1" checked> Apple </label>
</label>
</div>
<!-- disabled radio --> <!-- disabled radio -->
<div> <label class="ant-radio-vertical">
<label> <input type="radio" name="radios" id="optionsRadios3" value="option3" disabled> Banana(disabled)
<input type="radio" name="radios" id="optionsRadios3" value="option3" disabled> Banana(disabled) </label>
</label>
</div>
</div> </div>
</div> </div>
<div class="ant-form-item"> <div class="ant-form-item ant-form-item-compact">
<label class="col-6">内联的 radio：</label> <label class="col-6">内联的 radio：</label>
<div class="col-18"> <div class="col-18">
<!-- 内联的radio --> <!-- 内联的radio -->
@ -96,7 +88,7 @@
</label> </label>
</div> </div>
</div> </div>
<div class="ant-form-item"> <div class="ant-form-item ant-form-item-compact">
<label class="col-6" for="InputFile">头像：</label> <label class="col-6" for="InputFile">头像：</label>
<div class="col-18"> <div class="col-18">
<input type="file" id="InputFile" class="ant-upload"> <input type="file" id="InputFile" class="ant-upload">

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

@ -8,11 +8,13 @@
为 `label` 标签添加 `required` 属性，表示该项必选。 为 `label` 标签添加 `required` 属性，表示该项必选。
**注意**：对于表单域(`.ant-form-item`) 为静态文本、`checkbox`、`radio`以及`input[type="file"]`的，其高度不同于一般的表单域，需要在 `.ant-form-item` 类后再加上 `.ant-form-item-compact`。
--- ---
````html ````html
<form class="ant-form-horizontal"> <form class="ant-form-horizontal">
<div class="ant-form-item"> <div class="ant-form-item ant-form-item-compact">
<label for="userName" class="col-6" required>用户名：</label> <label for="userName" class="col-6" required>用户名：</label>
<div class="col-6"> <div class="col-6">
<p class="ant-form-text">大眼萌 minion</p> <p class="ant-form-text">大眼萌 minion</p>
@ -24,7 +26,7 @@
<input class="ant-input" type="password" id="password" placeholder="请输入密码"/> <input class="ant-input" type="password" id="password" placeholder="请输入密码"/>
</div> </div>
</div> </div>
<div class="ant-form-item"> <div class="ant-form-item ant-form-item-compact">
<label class="col-6" required>您的性别：</label> <label class="col-6" required>您的性别：</label>
<div class="col-14"> <div class="col-14">
<label class="ant-radio-inline"> <label class="ant-radio-inline">
@ -39,10 +41,9 @@
<label for="password" class="col-6" required>备注：</label> <label for="password" class="col-6" required>备注：</label>
<div class="col-14"> <div class="col-14">
<textarea class="ant-input" placeholder="随便写"></textarea> <textarea class="ant-input" placeholder="随便写"></textarea>
<p class="ant-form-explain">随便写点什么吧</p>
</div> </div>
</div> </div>
<div class="ant-form-item"> <div class="ant-form-item ant-form-item-compact">
<div class="col-14 col-offset-6"> <div class="col-14 col-offset-6">
<label> <label>
<input type="checkbox"> 我是同意的 <input type="checkbox"> 我是同意的

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

@ -83,8 +83,8 @@
</div> </div>
</div> </div>
</div> </div>
<p class="ant-form-explain">请输入正确的电话号码</p>
</div> </div>
<p class="ant-form-explain">请输入正确的电话号码</p>
</div> </div>
</div> </div>
</form> </form>

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

@ -47,7 +47,7 @@ React.render(
</div> </div>
<div className="col-3"><p className="ant-form-text"> 台机器</p></div> <div className="col-3"><p className="ant-form-text"> 台机器</p></div>
</div> </div>
<div className="ant-form-item"> <div className="ant-form-item ant-form-item-compact">
<label className="col-6" required> <label className="col-6" required>
<i className="anticon anticon-exclamation-circle" style={{color: '#f60'}}></i> 我是标题: <i className="anticon anticon-exclamation-circle" style={{color: '#f60'}}></i> 我是标题:
</label> </label>
@ -98,7 +98,7 @@ React.render(
</div> </div>
</div> </div>
</div> </div>
<div className="ant-form-item"> <div className="ant-form-item ant-form-item-compact">
<label for="" className="col-6" required>ant-radio:</label> <label for="" className="col-6" required>ant-radio:</label>
<div className="col-16"> <div className="col-16">
<label className="ant-radio-inline"> <label className="ant-radio-inline">
@ -112,7 +112,7 @@ React.render(
</label> </label>
</div> </div>
</div> </div>
<div className="ant-form-item"> <div className="ant-form-item ant-form-item-compact">
<label for="" className="col-6" required>ant-checkbox:</label> <label for="" className="col-6" required>ant-checkbox:</label>
<div className="col-16"> <div className="col-16">
<label className="ant-checkbox-inline"> <label className="ant-checkbox-inline">
@ -126,6 +126,20 @@ React.render(
</label> </label>
</div> </div>
</div> </div>
<div className="ant-form-item ant-form-item-compact">
<label for="" className="col-6" required>ant-checkbox:</label>
<div className="col-16">
<label className="ant-checkbox-vertical">
<Checkbox /> 选项一
</label>
<label className="ant-checkbox-vertical">
<Checkbox /> 选项二
</label>
<label className="ant-checkbox-vertical">
<Checkbox /> 选项三
</label>
</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">