mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
fix: InputNumber addon in compact (#46130)
* fix: InputNumber addon in compact * chore: code clean
This commit is contained in:
MadCcc
GitHub
parent
e2e0e9f9e5
commit
082975e9c4
@ -188,6 +188,29 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
|
||||
[`${componentCls}-wrapper-disabled > ${componentCls}-group-addon`]: {
|
||||
...genDisabledStyle(token),
|
||||
},
|
||||
|
||||
// Fix the issue of using icons in Space Compact mode
|
||||
// https://github.com/ant-design/ant-design/issues/45764
|
||||
[`&:not(${componentCls}-compact-first-item):not(${componentCls}-compact-last-item)${componentCls}-compact-item`]:
|
||||
{
|
||||
[`${componentCls}, ${componentCls}-group-addon`]: {
|
||||
borderRadius: 0,
|
||||
},
|
||||
},
|
||||
|
||||
[`&:not(${componentCls}-compact-last-item)${componentCls}-compact-first-item`]: {
|
||||
[`${componentCls}, ${componentCls}-group-addon`]: {
|
||||
borderStartEndRadius: 0,
|
||||
borderEndEndRadius: 0,
|
||||
},
|
||||
},
|
||||
|
||||
[`&:not(${componentCls}-compact-first-item)${componentCls}-compact-last-item`]: {
|
||||
[`${componentCls}, ${componentCls}-group-addon`]: {
|
||||
borderStartStartRadius: 0,
|
||||
borderEndStartRadius: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -324,8 +324,11 @@ exports[`renders components/space/demo/base.tsx extend context correctly 2`] = `
|
||||
|
||||
exports[`renders components/space/demo/compact.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="site-space-compact-wrapper"
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -342,7 +345,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
value="26888888"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -361,7 +367,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -380,7 +389,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -438,7 +450,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -616,7 +631,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
value="Xihu District, Hangzhou"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -860,7 +878,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
value="Xihu District, Hangzhou"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -1037,7 +1058,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -1262,7 +1286,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -1869,7 +1896,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -3071,7 +3101,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -4265,7 +4298,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -4550,7 +4586,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -4717,7 +4756,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -4965,7 +5007,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -6528,7 +6573,10 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -8367,7 +8415,195 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-first-item"
|
||||
placeholder="input here"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
class="ant-input-number-group-wrapper ant-input-number-compact-item"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-wrapper ant-input-number-group"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-group-addon"
|
||||
>
|
||||
$
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="up"
|
||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
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>
|
||||
<div
|
||||
class="ant-input-number-input-wrap"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
placeholder="another input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number-group-wrapper ant-input-number-compact-item ant-input-number-compact-last-item"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-wrapper ant-input-number-group"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="up"
|
||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
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>
|
||||
<div
|
||||
class="ant-input-number-input-wrap"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
placeholder="another input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number-group-addon"
|
||||
>
|
||||
$
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -238,8 +238,11 @@ exports[`renders components/space/demo/base.tsx correctly 1`] = `
|
||||
|
||||
exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
<div
|
||||
class="site-space-compact-wrapper"
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -256,7 +259,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
value="26888888"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -275,7 +281,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -294,7 +303,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -333,7 +345,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -430,7 +445,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
value="Xihu District, Hangzhou"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -579,7 +597,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
value="Xihu District, Hangzhou"
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -756,7 +777,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -900,7 +924,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -951,7 +978,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -1052,7 +1082,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -1145,7 +1178,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -1268,7 +1304,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -1354,7 +1393,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -1449,7 +1491,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -1556,7 +1601,10 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact ant-space-compact-block"
|
||||
>
|
||||
@ -1737,7 +1785,195 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
>
|
||||
<div
|
||||
class="ant-space-compact"
|
||||
>
|
||||
<input
|
||||
class="ant-input ant-input-compact-item ant-input-compact-first-item"
|
||||
placeholder="input here"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
<div
|
||||
class="ant-input-number-group-wrapper ant-input-number-compact-item"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-wrapper ant-input-number-group"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-group-addon"
|
||||
>
|
||||
$
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="up"
|
||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
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>
|
||||
<div
|
||||
class="ant-input-number-input-wrap"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
placeholder="another input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number-group-wrapper ant-input-number-compact-item ant-input-number-compact-last-item"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-wrapper ant-input-number-group"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-handler-wrap"
|
||||
>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Increase Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-up"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="up"
|
||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="up"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-disabled="false"
|
||||
aria-label="Decrease Value"
|
||||
class="ant-input-number-handler ant-input-number-handler-down"
|
||||
role="button"
|
||||
unselectable="on"
|
||||
>
|
||||
<span
|
||||
aria-label="down"
|
||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||
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>
|
||||
<div
|
||||
class="ant-input-number-input-wrap"
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="ant-input-number-input"
|
||||
placeholder="another input"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-input-number-group-addon"
|
||||
>
|
||||
$
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -5,27 +5,3 @@
|
||||
## en-US
|
||||
|
||||
Compact Mode for form component.
|
||||
|
||||
```css
|
||||
.site-space-compact-wrapper .site-input-split {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.site-space-compact-wrapper .site-input-right:not(.ant-input-rtl) {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.site-space-compact-wrapper .site-input-right:not(.ant-input-rtl):hover,
|
||||
.site-space-compact-wrapper .site-input-right:not(.ant-input-rtl):focus {
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.site-space-compact-wrapper .site-input-right.ant-input-rtl {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.site-space-compact-wrapper .site-input-right.ant-input-rtl:hover,
|
||||
.site-space-compact-wrapper .site-input-right.ant-input-rtl:focus {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
```
|
||||
|
||||
@ -18,22 +18,19 @@ const { Option } = Select;
|
||||
const { TreeNode } = TreeSelect;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div className="site-space-compact-wrapper">
|
||||
<Space direction="vertical">
|
||||
<Space.Compact block>
|
||||
<Input style={{ width: '20%' }} defaultValue="0571" />
|
||||
<Input style={{ width: '30%' }} defaultValue="26888888" />
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block size="small">
|
||||
<Input style={{ width: 'calc(100% - 200px)' }} defaultValue="https://ant.design" />
|
||||
<Button type="primary">Submit</Button>
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<Input style={{ width: 'calc(100% - 200px)' }} defaultValue="https://ant.design" />
|
||||
<Button type="primary">Submit</Button>
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<Input
|
||||
style={{ width: 'calc(100% - 200px)' }}
|
||||
@ -43,7 +40,6 @@ const App: React.FC = () => (
|
||||
<Button icon={<CopyOutlined />} />
|
||||
</Tooltip>
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<Select defaultValue="Zhejiang" allowClear>
|
||||
<Option value="Zhejiang">Zhejiang</Option>
|
||||
@ -51,7 +47,6 @@ const App: React.FC = () => (
|
||||
</Select>
|
||||
<Input style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<Select allowClear mode="multiple" defaultValue="Zhejianggggg" style={{ width: '50%' }}>
|
||||
<Option value="Zhejianggggg">Zhejianggggg</Option>
|
||||
@ -59,13 +54,11 @@ const App: React.FC = () => (
|
||||
</Select>
|
||||
<Input style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<Input.Search style={{ width: '30%' }} defaultValue="0571" />
|
||||
<Input.Search allowClear style={{ width: '50%' }} defaultValue="26888888" />
|
||||
<Input.Search style={{ width: '20%' }} defaultValue="+1" />
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<Select defaultValue="Option1">
|
||||
<Option value="Option1">Option1</Option>
|
||||
@ -74,23 +67,19 @@ const App: React.FC = () => (
|
||||
<Input style={{ width: '50%' }} defaultValue="input content" />
|
||||
<InputNumber defaultValue={12} />
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<Input style={{ width: '50%' }} defaultValue="input content" />
|
||||
<DatePicker style={{ width: '50%' }} />
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<DatePicker.RangePicker style={{ width: '70%' }} />
|
||||
<Input style={{ width: '30%' }} defaultValue="input content" />
|
||||
<Button type="primary">查询</Button>
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<Input style={{ width: '30%' }} defaultValue="input content" />
|
||||
<DatePicker.RangePicker style={{ width: '70%' }} />
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<Select defaultValue="Option1-1">
|
||||
<Option value="Option1-1">Option1-1</Option>
|
||||
@ -101,7 +90,6 @@ const App: React.FC = () => (
|
||||
<Option value="Option2-2">Option2-2</Option>
|
||||
</Select>
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<Select defaultValue="1">
|
||||
<Option value="1">Between</Option>
|
||||
@ -128,7 +116,6 @@ const App: React.FC = () => (
|
||||
placeholder="Maximum"
|
||||
/>
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<Select defaultValue="Sign Up" style={{ width: '30%' }}>
|
||||
<Option value="Sign Up">Sign Up</Option>
|
||||
@ -140,7 +127,6 @@ const App: React.FC = () => (
|
||||
options={[{ value: 'text 1' }, { value: 'text 2' }]}
|
||||
/>
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<TimePicker style={{ width: '70%' }} />
|
||||
<Cascader
|
||||
@ -182,7 +168,6 @@ const App: React.FC = () => (
|
||||
placeholder="Select Address"
|
||||
/>
|
||||
</Space.Compact>
|
||||
<br />
|
||||
<Space.Compact block>
|
||||
<TimePicker.RangePicker />
|
||||
<TreeSelect
|
||||
@ -207,8 +192,12 @@ const App: React.FC = () => (
|
||||
</TreeSelect>
|
||||
<Button type="primary">Submit</Button>
|
||||
</Space.Compact>
|
||||
<br />
|
||||
</div>
|
||||
<Space.Compact>
|
||||
<Input placeholder="input here" />
|
||||
<InputNumber placeholder="another input" addonBefore="$" />
|
||||
<InputNumber placeholder="another input" addonAfter="$" />
|
||||
</Space.Compact>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user