mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-10 19:19:20 +08:00
docs(input): Added Space.Compact recommendations (#41080)
* docs(input): Added Space.Compact recommendations * chore: warning for deprecated --------- Co-authored-by: 二货机器人 <smith3816@gmail.com>
This commit is contained in:
parent
bc804166b4
commit
2bc16980ab
@ -4,6 +4,7 @@ import { useContext, useMemo } from 'react';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import type { FormItemStatusContextProps } from '../form/context';
|
||||
import { FormItemInputContext } from '../form/context';
|
||||
import warning from '../_util/warning';
|
||||
import useStyle from './style';
|
||||
|
||||
export interface GroupProps {
|
||||
@ -47,6 +48,14 @@ const Group: React.FC<GroupProps> = (props) => {
|
||||
[formItemContext],
|
||||
);
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
warning(
|
||||
false,
|
||||
'Input.Group',
|
||||
`'Input.Group' is deprecated. Please use 'Space.Compact' instead.`,
|
||||
);
|
||||
}
|
||||
|
||||
return wrapSSR(
|
||||
<span
|
||||
className={cls}
|
||||
|
@ -5130,6 +5130,312 @@ exports[`renders ./components/input/demo/borderless-debug.tsx extend context cor
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/input/demo/compact-style.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:16px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-first-item ant-input-compact-last-item"
|
||||
type="text"
|
||||
value="26888888"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:16px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-first-item"
|
||||
style="width:20%"
|
||||
type="text"
|
||||
value="0571"
|
||||
/>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-last-item"
|
||||
style="width:80%"
|
||||
type="text"
|
||||
value="26888888"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:16px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-first-item ant-input-compact-last-item"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
https://
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
placeholder="input search text"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
<span
|
||||
class="ant-input-clear-icon ant-input-clear-icon-hidden"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<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>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default 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>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:16px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
style="width:100%"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-first-item"
|
||||
type="text"
|
||||
value="Combine input and button"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-compact-item ant-btn-compact-last-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Zhejiang"
|
||||
>
|
||||
Zhejiang
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-select-dropdown ant-select-dropdown-placement-bottomLeft"
|
||||
style="left:-1000vw;top:-1000vh;box-sizing:border-box"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
id="undefined_list"
|
||||
role="listbox"
|
||||
style="height:0;width:0;overflow:hidden"
|
||||
>
|
||||
<div
|
||||
aria-label="Zhejiang"
|
||||
aria-selected="false"
|
||||
id="undefined_list_0"
|
||||
role="option"
|
||||
>
|
||||
zhejiang
|
||||
</div>
|
||||
<div
|
||||
aria-label="Jiangsu"
|
||||
aria-selected="false"
|
||||
id="undefined_list_1"
|
||||
role="option"
|
||||
>
|
||||
jiangsu
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="rc-virtual-list"
|
||||
style="position:relative"
|
||||
>
|
||||
<div
|
||||
class="rc-virtual-list-holder"
|
||||
style="max-height:256px;overflow-y:auto;overflow-anchor:none"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="rc-virtual-list-holder-inner"
|
||||
style="display:flex;flex-direction:column"
|
||||
>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option ant-select-item-option-active"
|
||||
title="Zhejiang"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
Zhejiang
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-selected="false"
|
||||
class="ant-select-item ant-select-item-option"
|
||||
title="Jiangsu"
|
||||
>
|
||||
<div
|
||||
class="ant-select-item-option-content"
|
||||
>
|
||||
Jiangsu
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-item-option-state"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-last-item"
|
||||
type="text"
|
||||
value="Xihu District, Hangzhou"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/input/demo/debug-addon.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
|
@ -1358,6 +1358,232 @@ exports[`renders ./components/input/demo/borderless-debug.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/input/demo/compact-style.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:16px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-first-item ant-input-compact-last-item"
|
||||
type="text"
|
||||
value="26888888"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:16px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-first-item"
|
||||
style="width:20%"
|
||||
type="text"
|
||||
value="0571"
|
||||
/>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-last-item"
|
||||
style="width:80%"
|
||||
type="text"
|
||||
value="26888888"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:16px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-middle ant-input-compact-item ant-input-compact-first-item ant-input-compact-last-item"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
https://
|
||||
</span>
|
||||
<span
|
||||
class="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
placeholder="input search text"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
<span
|
||||
class="ant-input-clear-icon ant-input-clear-icon-hidden"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<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>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default 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>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-bottom:16px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
style="width:100%"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-first-item"
|
||||
type="text"
|
||||
value="Combine input and button"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-compact-item ant-btn-compact-last-item"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<div
|
||||
class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
|
||||
>
|
||||
<div
|
||||
class="ant-select-selector"
|
||||
>
|
||||
<span
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<input
|
||||
aria-activedescendant="undefined_list_0"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="undefined_list"
|
||||
aria-haspopup="listbox"
|
||||
aria-owns="undefined_list"
|
||||
autocomplete="off"
|
||||
class="ant-select-selection-search-input"
|
||||
readonly=""
|
||||
role="combobox"
|
||||
style="opacity:0"
|
||||
type="search"
|
||||
unselectable="on"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-select-selection-item"
|
||||
title="Zhejiang"
|
||||
>
|
||||
Zhejiang
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-select-arrow"
|
||||
style="user-select:none;-webkit-user-select:none"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-select-suffix"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-last-item"
|
||||
type="text"
|
||||
value="Xihu District, Hangzhou"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/input/demo/debug-addon.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-vertical"
|
||||
|
@ -7,6 +7,7 @@ import Input from '..';
|
||||
import mountTest from '../../../tests/shared/mountTest';
|
||||
import rtlTest from '../../../tests/shared/rtlTest';
|
||||
import Form from '../../form';
|
||||
import { resetWarned } from '../../_util/warning';
|
||||
import { triggerFocus } from '../Input';
|
||||
|
||||
describe('Input', () => {
|
||||
@ -117,6 +118,15 @@ describe('Input', () => {
|
||||
expect(container.querySelector('input')?.selectionStart).toEqual(5);
|
||||
expect(container.querySelector('input')?.selectionEnd).toEqual(5);
|
||||
});
|
||||
|
||||
it('warning for Input.Group', () => {
|
||||
resetWarned();
|
||||
render(<Input.Group />);
|
||||
|
||||
expect(errorSpy).toHaveBeenCalledWith(
|
||||
"Warning: [antd: Input.Group] 'Input.Group' is deprecated. Please use 'Space.Compact' instead.",
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('prefix and suffix', () => {
|
||||
|
7
components/input/demo/compact-style.md
Normal file
7
components/input/demo/compact-style.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
使用 `Space.Compact` 创建紧凑模式,更多请查看 [Space.Compact](/components/space#spacecompact) 文档。
|
||||
|
||||
## en-US
|
||||
|
||||
Use `Space.Compact` create compact style, See the [Space.Compact](/components/space#spacecompact) documentation for more.
|
40
components/input/demo/compact-style.tsx
Normal file
40
components/input/demo/compact-style.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
import { Button, Input, Select, Space } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const { Search } = Input;
|
||||
|
||||
const options = [
|
||||
{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
},
|
||||
{
|
||||
value: 'jiangsu',
|
||||
label: 'Jiangsu',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Space direction="vertical" size="middle">
|
||||
<Space.Compact>
|
||||
<Input defaultValue="26888888" />
|
||||
</Space.Compact>
|
||||
<Space.Compact>
|
||||
<Input style={{ width: '20%' }} defaultValue="0571" />
|
||||
<Input style={{ width: '80%' }} defaultValue="26888888" />
|
||||
</Space.Compact>
|
||||
<Space.Compact>
|
||||
<Search addonBefore="https://" placeholder="input search text" allowClear />
|
||||
</Space.Compact>
|
||||
<Space.Compact style={{ width: '100%' }}>
|
||||
<Input defaultValue="Combine input and button" />
|
||||
<Button type="primary">Submit</Button>
|
||||
</Space.Compact>
|
||||
<Space.Compact>
|
||||
<Select defaultValue="Zhejiang" options={options} />
|
||||
<Input defaultValue="Xihu District, Hangzhou" />
|
||||
</Space.Compact>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
@ -1,14 +1,10 @@
|
||||
## zh-CN
|
||||
|
||||
输入框的组合展现。
|
||||
|
||||
注意:使用 `compact` 模式时,不需要通过 `Col` 来控制宽度。
|
||||
`Input.Group` 已废弃,可以使用 [Space.Compact](/components/space-cn#spacecompact) 替代 `Input.Group`。
|
||||
|
||||
## en-US
|
||||
|
||||
Input.Group example.
|
||||
|
||||
Note: You don't need `Col` to control the width in the `compact` mode.
|
||||
`Input.Group` is deprecated. Can use [Space.Compact](/components/space#spacecompact) substitute for `Input.Group`.
|
||||
|
||||
```css
|
||||
.site-input-group-wrapper .site-input-split {
|
||||
|
@ -21,7 +21,8 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
|
||||
<code src="./demo/basic.tsx">Basic usage</code>
|
||||
<code src="./demo/size.tsx">Three sizes of Input</code>
|
||||
<code src="./demo/addon.tsx">Pre / Post tab</code>
|
||||
<code src="./demo/group.tsx">Input Group</code>
|
||||
<code src="./demo/compact-style.tsx">Compact Style</code>
|
||||
<code src="./demo/group.tsx" debug>Input Group</code>
|
||||
<code src="./demo/search-input.tsx">Search box</code>
|
||||
<code src="./demo/search-input-loading.tsx">Search box with loading</code>
|
||||
<code src="./demo/textarea.tsx">TextArea</code>
|
||||
@ -94,20 +95,6 @@ The rest of the props of `Input.TextArea` are the same as the original [textarea
|
||||
|
||||
Supports all props of `Input`.
|
||||
|
||||
#### Input.Group
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| compact | Whether use compact style | boolean | false |
|
||||
| size | The size of `Input.Group` specifies the size of the included `Input` fields. Available: `large` `default` `small` | string | `default` |
|
||||
|
||||
```jsx
|
||||
<Input.Group>
|
||||
<input />
|
||||
<input />
|
||||
</Input.Group>
|
||||
```
|
||||
|
||||
#### Input.Password
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
|
@ -22,7 +22,8 @@ demo:
|
||||
<code src="./demo/basic.tsx">基本使用</code>
|
||||
<code src="./demo/size.tsx">三种大小</code>
|
||||
<code src="./demo/addon.tsx">前置/后置标签</code>
|
||||
<code src="./demo/group.tsx">输入框组合</code>
|
||||
<code src="./demo/compact-style.tsx">紧凑模式</code>
|
||||
<code src="./demo/group.tsx" debug>输入框组合</code>
|
||||
<code src="./demo/search-input.tsx">搜索框</code>
|
||||
<code src="./demo/search-input-loading.tsx">搜索框 loading</code>
|
||||
<code src="./demo/textarea.tsx">文本域</code>
|
||||
@ -95,20 +96,6 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el
|
||||
|
||||
其余属性和 Input 一致。
|
||||
|
||||
#### Input.Group
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| compact | 是否用紧凑模式 | boolean | false |
|
||||
| size | `Input.Group` 中所有的 `Input` 的大小,可选 `large` `default` `small` | string | `default` |
|
||||
|
||||
```jsx
|
||||
<Input.Group>
|
||||
<input />
|
||||
<input />
|
||||
</Input.Group>
|
||||
```
|
||||
|
||||
#### Input.Password
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|
Loading…
Reference in New Issue
Block a user