update form demo

This commit is contained in:
SimaQ 2015-07-31 16:26:09 +08:00
parent ed43331251
commit e74845896c
3 changed files with 4 additions and 7 deletions

View File

@ -4,11 +4,11 @@
`<form>` 标签添加 `.ant-form-horizontal` 类(这让 `.ant-form-item` 表现为栅格系统中的 `row`),并结合使用我们提供的 [栅格系统](http://ant.design/components/layout/),可以实现 label 标签和表单控件的水平排列。 `<form>` 标签添加 `.ant-form-horizontal` 类(这让 `.ant-form-item` 表现为栅格系统中的 `row`),并结合使用我们提供的 [栅格系统](http://ant.design/components/layout/),可以实现 label 标签和表单控件的水平排列。
如需将一行静态文本和 `<label>` 标签置于同一行,则只需为 `<p>` 标签添加 `.ant-form-text` 类即可。 如需将一行静态文本和 `<label>` 标签置于同一行,则只需为标签添加 `.ant-form-text` 类即可。
`label` 标签添加 `required` 属性,表示该项必选。 `label` 标签添加 `required` 属性,表示该项必选。
**注意**对于表单域(`.ant-form-item`) 为静态文本、`checkbox`、`radio`以及`input[type="file"]`的,其高度不同于一般的表单域,需要在 `.ant-form-item` 类后再加上 `.ant-form-item-compact` **注意**在我们的设计里,表单域(`.ant-form-item`) 为静态文本、`checkbox`、`radio`以及`input[type="file"]`的,其高度不同于一般的表单域,需要在 `.ant-form-item` 类后再加上 **`.ant-form-item-compact`**
--- ---

View File

@ -4,8 +4,6 @@
带标签的输入框:使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的输入框。 带标签的输入框:使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的输入框。
输入框组合:`.ant-inputs` 类由多个 `.ant-inputs-item` 组成,使多个 Input 可以在一行显示出来。
--- ---
````jsx ````jsx
@ -68,7 +66,7 @@ React.render(
</div> </div>
</div> </div>
</div> </div>
<div className="ant-form-item has-error"> <div className="ant-form-item">
<label className="col-6">电话号码:</label> <label className="col-6">电话号码:</label>
<div className="col-16"> <div className="col-16">
<div className="row"> <div className="row">
@ -92,7 +90,6 @@ React.render(
</div> </div>
</div> </div>
</div> </div>
<p className="ant-form-explain">请输入正确的电话号码</p>
</div> </div>
</div> </div>
</form> </form>

View File

@ -8,7 +8,7 @@
将以上三种校验状态类添加到这些控件的父级元素即可。 将以上三种校验状态类添加到这些控件的父级元素即可。
另外为输入框添加反馈图标,可以更好地反馈当前的校验状态,使用 `.has-feedback` 类包裹 input 输入框即可。 另外为输入框添加反馈图标,可以更好地反馈当前的校验状态,使用 `.has-feedback` 类包裹 input 输入框即可,在这里校验状态类就要和 `.has-feedback` 类同级
**注意**: 反馈图标只能使用在文本输入框 `<input class="ant-input">` 元素上。 **注意**: 反馈图标只能使用在文本输入框 `<input class="ant-input">` 元素上。