Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
0f8de041
A
ant-design
项目概览
wanjj_1210
/
ant-design
与 Fork 源项目一致
从无法访问的项目Fork
通知
10
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
ant-design
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
0f8de041
编写于
7月 21, 2015
作者:
S
SimaQ
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update form demo page
上级
4e4567c9
变更
5
显示空白变更内容
内联
并排
Showing
5 changed file
with
69 addition
and
63 deletion
+69
-63
components/form/demo/disabled.md
components/form/demo/disabled.md
+1
-1
components/form/demo/form-controls.md
components/form/demo/form-controls.md
+1
-1
components/form/demo/horizontal-form.md
components/form/demo/horizontal-form.md
+1
-0
components/form/demo/inputs.md
components/form/demo/inputs.md
+66
-46
components/form/demo/mix.md
components/form/demo/mix.md
+0
-15
未找到文件。
components/form/demo/disabled.md
浏览文件 @
0f8de041
# 禁用状态
-
order:
3
-
order:
2
1) 单独为输入框设置
`disabled`
属性;
...
...
components/form/demo/form-controls.md
浏览文件 @
0f8de041
# 表单控件
-
order:
2
-
order:
3
展示所有支持的表单控件。
...
...
components/form/demo/horizontal-form.md
浏览文件 @
0f8de041
...
...
@@ -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"
>
...
...
components/form/demo/inputs.md
浏览文件 @
0f8de041
...
...
@@ -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
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
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
>
</
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
class
Name
=
"ant-form-item"
>
<
label
class
Name
=
"col-6"
>
输入身份证:
</
label
>
<
div
class
Name
=
"col-16"
>
<
div
class
Name
=
"ant-input-group"
>
<
div
class
Name
=
"col-6"
>
<
input
class
Name
=
"ant-input"
type
=
"text"
id
=
"certNo1"
/>
</
div
>
<div
class=
"col-6"
>
<input
class=
"ant-input"
type=
"text"
id=
"certNo2"
/>
<
div
class
Name
=
"col-6"
>
<
input
class
Name
=
"ant-input"
type
=
"text"
id
=
"certNo2"
/>
</
div
>
<div
class=
"col-6"
>
<input
class=
"ant-input"
type=
"text"
id=
"certNo3"
/>
<
div
class
Name
=
"col-6"
>
<
input
class
Name
=
"ant-input"
type
=
"text"
id
=
"certNo3"
/>
</
div
>
<div
class=
"col-6"
>
<input
class=
"ant-input"
type=
"text"
id=
"certNo4"
/>
<
div
class
Name
=
"col-6"
>
<
input
class
Name
=
"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
class
Name
=
"ant-form-item has-error"
>
<
label
class
Name
=
"col-6"
>
电话号码:
</
label
>
<
div
class
Name
=
"col-16"
>
<
div
class
Name
=
"row"
>
<
div
class
Name
=
"col-4"
>
<
input
class
Name
=
"ant-input"
type
=
"text"
id
=
"tel1"
value
=
"086"
/>
</
div
>
<div
class=
"col-2"
>
<p
class=
"ant-form-split"
>
--
</p>
<
div
class
Name
=
"col-2"
>
<
p
class
Name
=
"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
class
Name
=
"col-18"
>
<
div
class
Name
=
"ant-input-group"
>
<
div
class
Name
=
"col-8"
>
<
input
class
Name
=
"ant-input"
type
=
"text"
id
=
"tel1"
/>
</
div
>
<div
class=
"col-8"
>
<input
class=
"ant-input"
type=
"text"
id=
"tel2"
/>
<
div
class
Name
=
"col-8"
>
<
input
class
Name
=
"ant-input"
type
=
"text"
id
=
"tel2"
/>
</
div
>
<div
class=
"col-8"
>
<input
class=
"ant-input"
type=
"text"
id=
"tel3"
/>
<
div
class
Name
=
"col-8"
>
<
input
class
Name
=
"ant-input"
type
=
"text"
id
=
"tel3"
/>
</
div
>
</
div
>
</
div
>
</
div
>
<p
class=
"ant-form-explain"
>
请输入正确的电话号码
</p>
<
p
class
Name
=
"ant-form-explain"
>
请输入正确的电话号码
</
p
>
</
div
>
</
div
>
</
form
>
,
document
.
getElementById
(
'
components-form-demo-inputs
'
));
````
components/form/demo/mix.md
浏览文件 @
0f8de041
...
...
@@ -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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录