mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
fix: border style of Input.Search when allowClear (#27325)
* fix: border style of Input.Search when allowClear * fix css * update * change name
This commit is contained in:
xrk
GitHub
parent
b0245e742b
commit
92f7f6dbb2
@ -1061,7 +1061,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
|
||||
class="ant-select-selection-search"
|
||||
>
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-select-selection-search-input"
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-input-search-with-button ant-select-selection-search-input"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
|
||||
@ -109,12 +109,12 @@ const Search = React.forwardRef<Input, SearchProps>((props, ref) => {
|
||||
className,
|
||||
size: customizeSize,
|
||||
suffix,
|
||||
enterButton,
|
||||
...restProps
|
||||
} = props;
|
||||
|
||||
delete (restProps as any).onSearch;
|
||||
delete (restProps as any).loading;
|
||||
delete (restProps as any).enterButton;
|
||||
|
||||
const prefixCls = getPrefixCls('input-search', customizePrefixCls);
|
||||
const inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
|
||||
@ -125,6 +125,7 @@ const Search = React.forwardRef<Input, SearchProps>((props, ref) => {
|
||||
{
|
||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||
[`${prefixCls}-${size}`]: !!size,
|
||||
[`${prefixCls}-with-button`]: !!enterButton,
|
||||
},
|
||||
className,
|
||||
);
|
||||
|
||||
@ -95,7 +95,7 @@ exports[`Input.Search should support addonAfter 1`] = `
|
||||
|
||||
exports[`Input.Search should support addonAfter 2`] = `
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-with-button"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
@ -202,13 +202,13 @@ exports[`Input.Search should support addonAfter and suffix for loading 1`] = `
|
||||
|
||||
exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-with-button"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-search"
|
||||
class="ant-input-affix-wrapper ant-input-search ant-input-search-with-button"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
@ -261,7 +261,7 @@ exports[`Input.Search should support addonAfter and suffix for loading 2`] = `
|
||||
|
||||
exports[`Input.Search should support custom Button 1`] = `
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-with-button"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
@ -289,7 +289,7 @@ exports[`Input.Search should support custom Button 1`] = `
|
||||
|
||||
exports[`Input.Search should support custom button 1`] = `
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-with-button"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
@ -314,7 +314,7 @@ exports[`Input.Search should support custom button 1`] = `
|
||||
|
||||
exports[`Input.Search should support invalid addonAfter 1`] = `
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-with-button"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
@ -460,7 +460,7 @@ exports[`Input.Search should support loading 1`] = `
|
||||
|
||||
exports[`Input.Search should support loading 2`] = `
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-with-button"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
|
||||
@ -1328,15 +1328,9 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
<span
|
||||
class="ant-input-group ant-input-group-compact"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
style="width:20%"
|
||||
type="text"
|
||||
value="0571"
|
||||
/>
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
style="width:30%"
|
||||
style="width:40%"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
@ -1344,7 +1338,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
<input
|
||||
class="ant-input"
|
||||
type="text"
|
||||
value="26888888"
|
||||
value="0571"
|
||||
/>
|
||||
<span
|
||||
class="ant-input-group-addon"
|
||||
@ -1377,6 +1371,227 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
|
||||
</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"
|
||||
class=""
|
||||
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"
|
||||
class=""
|
||||
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"
|
||||
>
|
||||
<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="0571"
|
||||
/>
|
||||
<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"
|
||||
class=""
|
||||
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"
|
||||
class=""
|
||||
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"
|
||||
class=""
|
||||
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"
|
||||
class=""
|
||||
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
|
||||
@ -2338,10 +2553,83 @@ Array [
|
||||
</span>
|
||||
</span>
|
||||
</span>,
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
style="width:200px;margin:0 10px"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper"
|
||||
>
|
||||
<input
|
||||
class="ant-input"
|
||||
placeholder="input search text"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
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"
|
||||
class=""
|
||||
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>,
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-with-button"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
@ -2386,17 +2674,46 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large"
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-input-search-with-button"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-lg"
|
||||
placeholder="input search text"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-lg"
|
||||
placeholder="input search text"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<span
|
||||
class="ant-input-suffix"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
|
||||
role="button"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
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"
|
||||
>
|
||||
@ -2414,13 +2731,13 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large"
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-input-search-with-button"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-search ant-input-search-large"
|
||||
class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-search ant-input-search-large ant-input-search-with-button"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-lg"
|
||||
@ -2523,7 +2840,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-search"
|
||||
class="ant-input-group-wrapper ant-input-search ant-input-search-with-button"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
@ -2572,7 +2889,7 @@ Array [
|
||||
<br />,
|
||||
<br />,
|
||||
<span
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large"
|
||||
class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-large ant-input-search-with-button"
|
||||
>
|
||||
<span
|
||||
class="ant-input-wrapper ant-input-group"
|
||||
|
||||
@ -84,8 +84,13 @@ const App = () => (
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
<Input style={{ width: '20%' }} defaultValue="0571" />
|
||||
<Input.Search style={{ width: '30%' }} defaultValue="26888888" />
|
||||
<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" />
|
||||
</Input.Group>
|
||||
<br />
|
||||
<Input.Group compact>
|
||||
|
||||
@ -33,12 +33,24 @@ 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" enterButton="Search" size="large" onSearch={onSearch} />
|
||||
<Search
|
||||
placeholder="input search text"
|
||||
allowClear
|
||||
enterButton="Search"
|
||||
size="large"
|
||||
onSearch={onSearch}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<Search
|
||||
|
||||
@ -8,6 +8,19 @@
|
||||
.input();
|
||||
display: inline-flex;
|
||||
|
||||
&:hover {
|
||||
.hover();
|
||||
z-index: 1;
|
||||
.@{ant-prefix}-input-search-with-button & {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-focused,
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
.@{ant-prefix}-input[disabled] {
|
||||
background: transparent;
|
||||
|
||||
@ -169,6 +169,9 @@
|
||||
&:hover {
|
||||
z-index: 1;
|
||||
border-right-width: 1px;
|
||||
.@{ant-prefix}-input-search-with-button & {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -278,6 +281,10 @@
|
||||
&:not(:last-child) {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
.@{ant-prefix}-input-search & {
|
||||
border-top-left-radius: @border-radius-base;
|
||||
border-bottom-left-radius: @border-radius-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -373,5 +380,24 @@
|
||||
& > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.@{ant-prefix}-input-group-wrapper + .@{ant-prefix}-input-group-wrapper {
|
||||
margin-left: -1px;
|
||||
.@{ant-prefix}-input-affix-wrapper {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-input-group-wrapper:not(:last-child) {
|
||||
&.@{ant-prefix}-input-search > .@{ant-prefix}-input-group {
|
||||
& > .@{ant-prefix}-input-group-addon > .@{ant-prefix}-input-search-button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
& > .@{ant-prefix}-input {
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -153,6 +153,19 @@
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-input-group-wrapper-rtl + .@{ant-prefix}-input-group-wrapper-rtl {
|
||||
margin-right: -1px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.@{ant-prefix}-input-group-wrapper-rtl:not(:last-child) {
|
||||
&.@{ant-prefix}-input-search > .@{ant-prefix}-input-group {
|
||||
& > .@{ant-prefix}-input {
|
||||
border-radius: 0 @border-radius-base @border-radius-base 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -164,9 +177,6 @@
|
||||
direction: rtl;
|
||||
|
||||
.@{ant-prefix}-input {
|
||||
border-right: @border-width-base solid @border-color-base;
|
||||
border-left: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
+ .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
|
||||
@ -178,15 +188,15 @@
|
||||
|
||||
> .@{ant-prefix}-input-group {
|
||||
> .@{ant-prefix}-input-affix-wrapper {
|
||||
border-right: @border-width-base solid @border-color-base;
|
||||
border-left: 0;
|
||||
|
||||
&:hover,
|
||||
&-focused {
|
||||
border-right-color: @input-hover-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
> .@{ant-prefix}-input-group-addon {
|
||||
right: -1px;
|
||||
left: auto;
|
||||
.@{search-prefix}-button {
|
||||
border-radius: @border-radius-base 0 0 @border-radius-base;
|
||||
}
|
||||
|
||||
@ -7,8 +7,6 @@
|
||||
|
||||
.@{search-prefix} {
|
||||
.@{ant-prefix}-input {
|
||||
border-right: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-color: @input-hover-border-color;
|
||||
@ -19,6 +17,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.@{ant-prefix}-input-affix-wrapper {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// fix slight height diff in Firefox:
|
||||
// https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category
|
||||
.@{ant-prefix}-input-lg {
|
||||
@ -26,10 +28,8 @@
|
||||
}
|
||||
|
||||
> .@{ant-prefix}-input-group {
|
||||
> .@{ant-prefix}-input-affix-wrapper {
|
||||
border-right: 0;
|
||||
}
|
||||
> .@{ant-prefix}-input-group-addon {
|
||||
left: -1px;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
|
||||
@ -49,4 +49,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-button {
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user