mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-12 23:35:38 +08:00
4f811cbe82
* docs: add a little pro-compents advertising * docs: add a little pro-compents advertising
147 lines
3.5 KiB
Markdown
147 lines
3.5 KiB
Markdown
---
|
||
order: 13
|
||
title:
|
||
zh-CN: 高级搜索
|
||
en-US: Advanced search
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
三列栅格式的表单排列方式，常用于数据表格的高级搜索。
|
||
|
||
有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。
|
||
|
||
> 🛎️ 想要 3 分钟实现？ 试试 ProFrom 的[查询表单](https://procomponents.ant.design/components/form#%E6%9F%A5%E8%AF%A2%E7%AD%9B%E9%80%89)！
|
||
|
||
## en-US
|
||
|
||
Three columns layout is often used for advanced searching of data table.
|
||
|
||
Because the width of label is not fixed, you may need to adjust it by customizing its style.
|
||
|
||
```tsx
|
||
import React, { useState } from 'react';
|
||
import { Form, Row, Col, Input, Button } from 'antd';
|
||
import { DownOutlined, UpOutlined } from '@ant-design/icons';
|
||
|
||
const AdvancedSearchForm = () => {
|
||
const [expand, setExpand] = useState(false);
|
||
const [form] = Form.useForm();
|
||
|
||
const getFields = () => {
|
||
const count = expand ? 10 : 6;
|
||
const children = [];
|
||
for (let i = 0; i < count; i++) {
|
||
children.push(
|
||
<Col span={8} key={i}>
|
||
<Form.Item
|
||
name={`field-${i}`}
|
||
label={`Field ${i}`}
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: 'Input something!',
|
||
},
|
||
]}
|
||
>
|
||
<Input placeholder="placeholder" />
|
||
</Form.Item>
|
||
</Col>,
|
||
);
|
||
}
|
||
return children;
|
||
};
|
||
|
||
const onFinish = values => {
|
||
console.log('Received values of form: ', values);
|
||
};
|
||
|
||
return (
|
||
<Form
|
||
form={form}
|
||
name="advanced_search"
|
||
className="ant-advanced-search-form"
|
||
onFinish={onFinish}
|
||
>
|
||
<Row gutter={24}>{getFields()}</Row>
|
||
<Row>
|
||
<Col span={24} style={{ textAlign: 'right' }}>
|
||
<Button type="primary" htmlType="submit">
|
||
Search
|
||
</Button>
|
||
<Button
|
||
style={{ margin: '0 8px' }}
|
||
onClick={() => {
|
||
form.resetFields();
|
||
}}
|
||
>
|
||
Clear
|
||
</Button>
|
||
<a
|
||
style={{ fontSize: 12 }}
|
||
onClick={() => {
|
||
setExpand(!expand);
|
||
}}
|
||
>
|
||
{expand ? <UpOutlined /> : <DownOutlined />} Collapse
|
||
</a>
|
||
</Col>
|
||
</Row>
|
||
</Form>
|
||
);
|
||
};
|
||
|
||
ReactDOM.render(
|
||
<div>
|
||
<AdvancedSearchForm />
|
||
<div className="search-result-list">Search Result List</div>
|
||
</div>,
|
||
mountNode,
|
||
);
|
||
```
|
||
|
||
```css
|
||
[data-theme='compact'] .ant-advanced-search-form,
|
||
.ant-advanced-search-form {
|
||
padding: 24px;
|
||
background: #fbfbfb;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
[data-theme='compact'] .ant-advanced-search-form .ant-form-item,
|
||
.ant-advanced-search-form .ant-form-item {
|
||
display: flex;
|
||
}
|
||
|
||
[data-theme='compact'] .ant-advanced-search-form .ant-form-item-control-wrapper,
|
||
.ant-advanced-search-form .ant-form-item-control-wrapper {
|
||
flex: 1;
|
||
}
|
||
```
|
||
|
||
<style>
|
||
#components-form-demo-advanced-search .ant-form {
|
||
max-width: none;
|
||
}
|
||
#components-form-demo-advanced-search .search-result-list {
|
||
margin-top: 16px;
|
||
border: 1px dashed #e9e9e9;
|
||
border-radius: 2px;
|
||
background-color: #fafafa;
|
||
min-height: 200px;
|
||
text-align: center;
|
||
padding-top: 80px;
|
||
}
|
||
[data-theme="dark"] .ant-advanced-search-form {
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid #434343;
|
||
padding: 24px;
|
||
border-radius: 2px;
|
||
}
|
||
[data-theme="dark"] #components-form-demo-advanced-search .search-result-list {
|
||
border: 1px dashed #434343;
|
||
background: rgba(255,255,255,0.04);
|
||
}
|
||
</style>
|