mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-29 21:59:41 +08:00
c373710ce2
* fix: border style of Input.Search when allowClear (#27325) * fix: border style of Input.Search when allowClear * fix css * update * change name * docs: 4.7.3 changelog (#27350) * docs: 4.7.3 changelog * docs: Patch 27325 * chore: improve useCombinedRefs (#27352) * docs: 📝 update introduce * chore: fix API table border * chore: Adjust collapse arrow position align with first line Co-authored-by: xrk <xrkffgg@gmail.com> Co-authored-by: Tom Xu <ycxzhkx@gmail.com> Co-authored-by: afc163 <afc163@gmail.com>
1.2 KiB
1.2 KiB
| order | title | ||||
|---|---|---|---|---|---|
| 4 |
|
zh-CN
带有搜索按钮的输入框。
en-US
Example of creating a search box by grouping a standard input with a search button.
import { Input } from 'antd';
import { AudioOutlined } from '@ant-design/icons';
const { Search } = Input;
const suffix = (
<AudioOutlined
style={{
fontSize: 16,
color: '#1890ff',
}}
/>
);
const onSearch = value => console.log(value);
ReactDOM.render(
<>
<Search placeholder="input search text" onSearch={onSearch} style={{ width: 200 }} />
<Search
placeholder="input search text"
allowClear
onSearch={onSearch}
style={{ width: 200, margin: '0 10px' }}
/>
<br />
<br />
<Search placeholder="input search text" onSearch={onSearch} enterButton />
<br />
<br />
<Search
placeholder="input search text"
allowClear
enterButton="Search"
size="large"
onSearch={onSearch}
/>
<br />
<br />
<Search
placeholder="input search text"
enterButton="Search"
size="large"
suffix={suffix}
onSearch={onSearch}
/>
</>,
mountNode,
);