mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-26 04:00:13 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity
c464f61f39
ant-design/components/input/demo/search-input.md
二货机器人 c373710ce2
chore: Adjust collapse arrow position align with first line (#27363) 
* 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>
2020-10-26 10:56:09 +08:00

1.2 KiB
Raw Blame History

order title
4
zh-CN en-US
搜索框 Search box

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,
);