Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wanjj_1210
ant-design
提交
6d4c4e12
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,发现更多精彩内容 >>
提交
6d4c4e12
编写于
12月 29, 2015
作者:
A
afc163
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Add advanced search form demo
上级
98b899d0
变更
3
显示空白变更内容
内联
并排
Showing
3 changed file
with
129 addition
and
0 deletion
+129
-0
components/form/demo/advanced-search-form.md
components/form/demo/advanced-search-form.md
+121
-0
components/form/index.md
components/form/index.md
+6
-0
site/static/tomorrow.css
site/static/tomorrow.css
+2
-0
未找到文件。
components/form/demo/advanced-search-form.md
0 → 100644
浏览文件 @
6d4c4e12
# 高级搜索
-
order: 10
三列栅格式的表单排列方式,常用于数据表格的高级搜索。
有部分定制的样式代码,由于输入标签长度不确定,需要根据具体情况自行调整。
---
````
jsx
import
{
Form
,
Input
,
Row
,
Col
,
Button
}
from
'
antd
'
;
const
FormItem
=
Form
.
Item
;
ReactDOM
.
render
(
<
Form
horizontal
className
=
"advanced-search-form"
>
<
Row
>
<
Col
span
=
"8"
>
<
FormItem
label
=
"搜索名称:"
labelCol
=
{
{
span
:
10
}
}
wrapperCol
=
{
{
span
:
14
}
}
>
<
Input
placeholder
=
"请输入搜索名称"
/>
</
FormItem
>
<
FormItem
label
=
"较长搜索名称:"
labelCol
=
{
{
span
:
10
}
}
wrapperCol
=
{
{
span
:
14
}
}
>
<
Input
placeholder
=
"请输入搜索名称"
/>
</
FormItem
>
<
FormItem
label
=
"搜索名称:"
labelCol
=
{
{
span
:
10
}
}
wrapperCol
=
{
{
span
:
14
}
}
>
<
Input
placeholder
=
"请输入搜索名称"
/>
</
FormItem
>
</
Col
>
<
Col
span
=
"8"
>
<
FormItem
label
=
"搜索名称:"
labelCol
=
{
{
span
:
10
}
}
wrapperCol
=
{
{
span
:
14
}
}
>
<
Input
placeholder
=
"请输入搜索名称"
/>
</
FormItem
>
<
FormItem
label
=
"较长搜索名称:"
labelCol
=
{
{
span
:
10
}
}
wrapperCol
=
{
{
span
:
14
}
}
>
<
Input
placeholder
=
"请输入搜索名称"
/>
</
FormItem
>
<
FormItem
label
=
"搜索名称:"
labelCol
=
{
{
span
:
10
}
}
wrapperCol
=
{
{
span
:
14
}
}
>
<
Input
placeholder
=
"请输入搜索名称"
/>
</
FormItem
>
</
Col
>
<
Col
span
=
"8"
>
<
FormItem
label
=
"搜索名称:"
labelCol
=
{
{
span
:
10
}
}
wrapperCol
=
{
{
span
:
14
}
}
>
<
Input
placeholder
=
"请输入搜索名称"
/>
</
FormItem
>
<
FormItem
label
=
"较长搜索名称:"
labelCol
=
{
{
span
:
10
}
}
wrapperCol
=
{
{
span
:
14
}
}
>
<
Input
placeholder
=
"请输入搜索名称"
/>
</
FormItem
>
<
FormItem
label
=
"搜索名称:"
labelCol
=
{
{
span
:
10
}
}
wrapperCol
=
{
{
span
:
14
}
}
>
<
Input
placeholder
=
"请输入搜索名称"
/>
</
FormItem
>
</
Col
>
</
Row
>
<
Row
>
<
Col
span
=
"8"
offset
=
"16"
style
=
{
{
textAlign
:
'
right
'
}
}
>
<
Button
type
=
"primary"
htmlType
=
"submit"
>
搜索
</
Button
>
<
Button
type
=
"ghost"
>
清除条件
</
Button
>
</
Col
>
</
Row
>
</
Form
>
,
mountNode
);
````
````
css
/* 定制样式 */
.advanced-search-form
{
padding
:
16px
8px
;
background
:
#FBFBFB
;
border
:
1px
solid
#d9d9d9
;
border-radius
:
6px
;
}
/* 由于输入标签长度不确定,所以需要微调使之看上去居中 */
.advanced-search-form
>
.row
{
margin-left
:
-10px
;
}
.advanced-search-form
>
.row
>
.col-8
{
padding
:
0
8px
;
}
.advanced-search-form
.ant-form-item
{
margin-bottom
:
16px
;
}
.advanced-search-form
.ant-btn
+
.ant-btn
{
margin-left
:
8px
;
}
````
<style>
#components-form-demo-three-cols .ant-form-horizontal {
max-width: none;
}
</style>
components/form/index.md
浏览文件 @
6d4c4e12
...
...
@@ -3,6 +3,7 @@
-
category: Components
-
chinese: 表单
-
type: 表单
-
cols: 1
---
...
...
@@ -86,3 +87,8 @@ Mixin:当表单控件的输入值改变时,更新 formData。
</Input.Group>
```
<style>
.code-box-demo .ant-form-horizontal {
max-width: 540px;
}
</style>
site/static/tomorrow.css
浏览文件 @
6d4c4e12
...
...
@@ -41,6 +41,7 @@ code {
color
:
#888
;
font-size
:
90%
;
border
:
1px
solid
#e9e9e9
;
white-space
:
nowrap
;
}
pre
code
{
...
...
@@ -53,4 +54,5 @@ pre code {
padding
:
10px
15px
;
border-radius
:
6px
;
font-size
:
14px
;
white-space
:
pre
;
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录