提交 0f8de041 编写于 作者: S SimaQ

update form demo page

上级 4e4567c9
# 禁用状态
- order: 3
- order: 2
1) 单独为输入框设置 `disabled` 属性;
......
# 表单控件
- order: 2
- order: 3
展示所有支持的表单控件。
......
......@@ -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">
......
......@@ -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'));
````
......@@ -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">
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册