mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-03 04:30:06 +08:00
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:
parent
a3622656eb
commit
2549e8176b
@ -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`] = `
|
||||
|
@ -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,
|
||||
);
|
||||
```
|
||||
|
Loading…
Reference in New Issue
Block a user