mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
docs: add demo for Input.Group (#32837)
https://weibo.com/2259174311/L0gtIjb3Z
This commit is contained in:
afc163
GitHub
parent
ce006bd44e
commit
958df3dd07
@ -1453,6 +1453,60 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="ant-input-group ant-input-group-compact"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
style="width:calc(100% - 200px)"
|
||||
type="text"
|
||||
value="https://ant.design"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Sumbit
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="ant-input-group ant-input-group-compact"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
style="width:calc(100% - 200px)"
|
||||
type="text"
|
||||
value="git@github.com:ant-design/ant-design.git"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="copy"
|
||||
class="anticon anticon-copy"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="copy"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="ant-input-group ant-input-group-compact"
|
||||
>
|
||||
@ -1523,123 +1577,6 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="ant-input-group ant-input-group-compact"
|
||||
>
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
style="width:40%"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value="0571"
|
||||
/>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
style="width:40%"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value="26888888"
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-icon-only ant-input-search-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="search"
|
||||
class="anticon anticon-search"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="search"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
class="ant-input-group ant-input-group-compact"
|
||||
>
|
||||
|
||||
@ -18,7 +18,19 @@ Input.Group example.
|
||||
Note: You don't need `Col` to control the width in the `compact` mode.
|
||||
|
||||
```jsx
|
||||
import { Input, Col, Row, Select, InputNumber, DatePicker, AutoComplete, Cascader } from 'antd';
|
||||
import {
|
||||
Input,
|
||||
Button,
|
||||
Col,
|
||||
Row,
|
||||
Select,
|
||||
InputNumber,
|
||||
DatePicker,
|
||||
AutoComplete,
|
||||
Cascader,
|
||||
Tooltip,
|
||||
} from 'antd';
|
||||
import { CopyOutlined } from '@ant-design/icons';
|
||||
|
||||
const { Option } = Select;
|
||||
|
||||
@ -75,6 +87,18 @@ const App = () => (
|
||||
<Input style={{ width: '30%' }} defaultValue="26888888" />
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Input style={{ width: 'calc(100% - 200px)' }} defaultValue="https://ant.design" />
|
||||
<Button type="primary">Sumbit</Button>
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Input style={{ width: 'calc(100% - 200px)' }} defaultValue="git@github.com:ant-design/ant-design.git" />
|
||||
<Tooltip title="copy git url">
|
||||
<Button icon={<CopyOutlined />} />
|
||||
</Tooltip>
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Select defaultValue="Zhejiang">
|
||||
<Option value="Zhejiang">Zhejiang</Option>
|
||||
@ -83,11 +107,6 @@ const App = () => (
|
||||
<Input style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Input.Search style={{ width: '40%' }} defaultValue="0571" />
|
||||
<Input.Search allowClear style={{ width: '40%' }} defaultValue="26888888" />
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Input.Search allowClear style={{ width: '40%' }} defaultValue="0571" />
|
||||
<Input.Search allowClear style={{ width: '40%' }} defaultValue="26888888" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user