docs: Input, use Space to refactor search-input demo (#28799)

* docs: Input, use Space to refactor search-input demo

* fix

* test: update snap
This commit is contained in:
07akioni 2021-01-10 21:42:44 +08:00 committed by GitHub
parent a3622656eb
commit 2549e8176b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 234 additions and 225 deletions

View File

@ -2563,7 +2563,13 @@ Array [
`;
exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
Array [
<div
class="ant-space ant-space-vertical"
>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<span
class="ant-input-group-wrapper ant-input-search"
style="width:200px"
@ -2606,10 +2612,15 @@ Array [
</button>
</span>
</span>
</span>,
</span>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<span
class="ant-input-group-wrapper ant-input-search"
style="width:200px;margin:0 10px"
style="width:200px"
>
<span
class="ant-input-wrapper ant-input-group"
@ -2677,9 +2688,12 @@ Array [
</button>
</span>
</span>
</span>,
<br />,
<br />,
</span>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<span
class="ant-input-group-wrapper ant-input-search ant-input-search-with-button"
>
@ -2721,9 +2735,12 @@ Array [
</button>
</span>
</span>
</span>,
<br />,
<br />,
</span>
</div>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-input-search-with-button"
>
@ -2777,9 +2794,11 @@ Array [
</button>
</span>
</span>
</span>,
<br />,
<br />,
</span>
</div>
<div
class="ant-space-item"
>
<span
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-input-search-with-button"
>
@ -2833,8 +2852,9 @@ Array [
</button>
</span>
</span>
</span>,
]
</span>
</div>
</div>
`;
exports[`renders ./components/input/demo/search-input-loading.md correctly 1`] = `

View File

@ -14,7 +14,7 @@ title:
Example of creating a search box by grouping a standard input with a search button.
```jsx
import { Input } from 'antd';
import { Input, Space } from 'antd';
import { AudioOutlined } from '@ant-design/icons';
const { Search } = Input;
@ -31,19 +31,10 @@ const suffix = (
const onSearch = value => console.log(value);
ReactDOM.render(
<>
<Space direction="vertical">
<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" allowClear onSearch={onSearch} style={{ width: 200 }} />
<Search placeholder="input search text" onSearch={onSearch} enterButton />
<br />
<br />
<Search
placeholder="input search text"
allowClear
@ -51,8 +42,6 @@ ReactDOM.render(
size="large"
onSearch={onSearch}
/>
<br />
<br />
<Search
placeholder="input search text"
enterButton="Search"
@ -60,7 +49,7 @@ ReactDOM.render(
suffix={suffix}
onSearch={onSearch}
/>
</>,
</Space>,
mountNode,
);
```