mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-01 23:29:30 +08:00
update form demo
This commit is contained in:
parent
ed43331251
commit
e74845896c
@ -4,11 +4,11 @@
|
||||
|
||||
为 `<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` 属性,表示该项必选。
|
||||
|
||||
**注意**:对于表单域(`.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`**。
|
||||
|
||||
---
|
||||
|
||||
|
@ -4,8 +4,6 @@
|
||||
|
||||
带标签的输入框:使用 `.ant-input-group` 类并结合 `.ant-input-group-addon` 类可以创建带标签的输入框。
|
||||
|
||||
输入框组合:`.ant-inputs` 类由多个 `.ant-inputs-item` 组成,使多个 Input 可以在一行显示出来。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
@ -68,7 +66,7 @@ React.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ant-form-item has-error">
|
||||
<div className="ant-form-item">
|
||||
<label className="col-6">电话号码:</label>
|
||||
<div className="col-16">
|
||||
<div className="row">
|
||||
@ -92,7 +90,6 @@ React.render(
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="ant-form-explain">请输入正确的电话号码</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
@ -8,7 +8,7 @@
|
||||
|
||||
将以上三种校验状态类添加到这些控件的父级元素即可。
|
||||
|
||||
另外为输入框添加反馈图标,可以更好地反馈当前的校验状态,使用 `.has-feedback` 类包裹 input 输入框即可。
|
||||
另外为输入框添加反馈图标,可以更好地反馈当前的校验状态,使用 `.has-feedback` 类包裹 input 输入框即可,在这里校验状态类就要和 `.has-feedback` 类同级。
|
||||
|
||||
**注意**: 反馈图标只能使用在文本输入框 `<input class="ant-input">` 元素上。
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user