mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 11:32:52 +08:00
docs: use space for InputNunber demo (#32273)
This commit is contained in:
xrkffgg
GitHub
parent
4054c767cd
commit
ee5b395d35
@ -909,158 +909,169 @@ Array [
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
|
exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
|
||||||
Array [
|
<div
|
||||||
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number"
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number-handler-wrap"
|
class="ant-input-number"
|
||||||
>
|
>
|
||||||
<span
|
<div
|
||||||
aria-disabled="false"
|
class="ant-input-number-handler-wrap"
|
||||||
aria-label="Increase Value"
|
|
||||||
class="ant-input-number-handler ant-input-number-handler-up"
|
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-label="up"
|
aria-disabled="false"
|
||||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
aria-label="Increase Value"
|
||||||
role="img"
|
class="ant-input-number-handler ant-input-number-handler-up"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<svg
|
<span
|
||||||
aria-hidden="true"
|
aria-label="up"
|
||||||
data-icon="up"
|
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||||
fill="currentColor"
|
role="img"
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
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"
|
aria-hidden="true"
|
||||||
/>
|
data-icon="up"
|
||||||
</svg>
|
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>
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
aria-label="Decrease Value"
|
|
||||||
class="ant-input-number-handler ant-input-number-handler-down"
|
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
|
||||||
<span
|
<span
|
||||||
aria-label="down"
|
aria-disabled="false"
|
||||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
aria-label="Decrease Value"
|
||||||
role="img"
|
class="ant-input-number-handler ant-input-number-handler-down"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<svg
|
<span
|
||||||
aria-hidden="true"
|
aria-label="down"
|
||||||
data-icon="down"
|
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||||
fill="currentColor"
|
role="img"
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
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"
|
aria-hidden="true"
|
||||||
/>
|
data-icon="down"
|
||||||
</svg>
|
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>
|
</span>
|
||||||
</span>
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-input-number-input-wrap"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-valuenow="1000"
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-input-number-input"
|
||||||
|
role="spinbutton"
|
||||||
|
step="1"
|
||||||
|
value="$ 1,000"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
</div>
|
||||||
class="ant-input-number-input-wrap"
|
|
||||||
>
|
|
||||||
<input
|
|
||||||
aria-valuenow="1000"
|
|
||||||
autocomplete="off"
|
|
||||||
class="ant-input-number-input"
|
|
||||||
role="spinbutton"
|
|
||||||
step="1"
|
|
||||||
value="$ 1,000"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>,
|
|
||||||
<div
|
<div
|
||||||
class="ant-input-number"
|
class="ant-space-item"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number-handler-wrap"
|
class="ant-input-number"
|
||||||
>
|
>
|
||||||
<span
|
<div
|
||||||
aria-disabled="true"
|
class="ant-input-number-handler-wrap"
|
||||||
aria-label="Increase Value"
|
|
||||||
class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
|
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-label="up"
|
aria-disabled="true"
|
||||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
aria-label="Increase Value"
|
||||||
role="img"
|
class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<svg
|
<span
|
||||||
aria-hidden="true"
|
aria-label="up"
|
||||||
data-icon="up"
|
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||||
fill="currentColor"
|
role="img"
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
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"
|
aria-hidden="true"
|
||||||
/>
|
data-icon="up"
|
||||||
</svg>
|
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>
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
aria-label="Decrease Value"
|
|
||||||
class="ant-input-number-handler ant-input-number-handler-down"
|
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
|
||||||
<span
|
<span
|
||||||
aria-label="down"
|
aria-disabled="false"
|
||||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
aria-label="Decrease Value"
|
||||||
role="img"
|
class="ant-input-number-handler ant-input-number-handler-down"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<svg
|
<span
|
||||||
aria-hidden="true"
|
aria-label="down"
|
||||||
data-icon="down"
|
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||||
fill="currentColor"
|
role="img"
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
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"
|
aria-hidden="true"
|
||||||
/>
|
data-icon="down"
|
||||||
</svg>
|
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>
|
</span>
|
||||||
</span>
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-input-number-input-wrap"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
aria-valuemax="100"
|
||||||
|
aria-valuemin="0"
|
||||||
|
aria-valuenow="100"
|
||||||
|
autocomplete="off"
|
||||||
|
class="ant-input-number-input"
|
||||||
|
role="spinbutton"
|
||||||
|
step="1"
|
||||||
|
value="100%"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
</div>
|
||||||
class="ant-input-number-input-wrap"
|
</div>
|
||||||
>
|
|
||||||
<input
|
|
||||||
aria-valuemax="100"
|
|
||||||
aria-valuemin="0"
|
|
||||||
aria-valuenow="100"
|
|
||||||
autocomplete="off"
|
|
||||||
class="ant-input-number-input"
|
|
||||||
role="spinbutton"
|
|
||||||
step="1"
|
|
||||||
value="100%"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>,
|
|
||||||
]
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders ./components/input-number/demo/keyboard.md correctly 1`] = `
|
exports[`renders ./components/input-number/demo/keyboard.md correctly 1`] = `
|
||||||
@ -1276,234 +1287,248 @@ exports[`renders ./components/input-number/demo/out-of-range.md correctly 1`] =
|
|||||||
|
|
||||||
exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
|
exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="site-input-number-wrapper"
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number ant-input-number-lg"
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number-handler-wrap"
|
class="ant-input-number ant-input-number-lg"
|
||||||
>
|
>
|
||||||
<span
|
<div
|
||||||
aria-disabled="false"
|
class="ant-input-number-handler-wrap"
|
||||||
aria-label="Increase Value"
|
|
||||||
class="ant-input-number-handler ant-input-number-handler-up"
|
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-label="up"
|
aria-disabled="false"
|
||||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
aria-label="Increase Value"
|
||||||
role="img"
|
class="ant-input-number-handler ant-input-number-handler-up"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<svg
|
<span
|
||||||
aria-hidden="true"
|
aria-label="up"
|
||||||
data-icon="up"
|
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||||
fill="currentColor"
|
role="img"
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
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"
|
aria-hidden="true"
|
||||||
/>
|
data-icon="up"
|
||||||
</svg>
|
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>
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
aria-label="Decrease Value"
|
|
||||||
class="ant-input-number-handler ant-input-number-handler-down"
|
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
|
||||||
<span
|
<span
|
||||||
aria-label="down"
|
aria-disabled="false"
|
||||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
aria-label="Decrease Value"
|
||||||
role="img"
|
class="ant-input-number-handler ant-input-number-handler-down"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<svg
|
<span
|
||||||
aria-hidden="true"
|
aria-label="down"
|
||||||
data-icon="down"
|
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||||
fill="currentColor"
|
role="img"
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
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"
|
aria-hidden="true"
|
||||||
/>
|
data-icon="down"
|
||||||
</svg>
|
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>
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div
|
||||||
<div
|
class="ant-input-number-input-wrap"
|
||||||
class="ant-input-number-input-wrap"
|
>
|
||||||
>
|
<input
|
||||||
<input
|
aria-valuemax="100000"
|
||||||
aria-valuemax="100000"
|
aria-valuemin="1"
|
||||||
aria-valuemin="1"
|
aria-valuenow="3"
|
||||||
aria-valuenow="3"
|
autocomplete="off"
|
||||||
autocomplete="off"
|
class="ant-input-number-input"
|
||||||
class="ant-input-number-input"
|
role="spinbutton"
|
||||||
role="spinbutton"
|
step="1"
|
||||||
step="1"
|
value="3"
|
||||||
value="3"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number"
|
class="ant-space-item"
|
||||||
|
style="margin-right:8px"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number-handler-wrap"
|
class="ant-input-number"
|
||||||
>
|
>
|
||||||
<span
|
<div
|
||||||
aria-disabled="false"
|
class="ant-input-number-handler-wrap"
|
||||||
aria-label="Increase Value"
|
|
||||||
class="ant-input-number-handler ant-input-number-handler-up"
|
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-label="up"
|
aria-disabled="false"
|
||||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
aria-label="Increase Value"
|
||||||
role="img"
|
class="ant-input-number-handler ant-input-number-handler-up"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<svg
|
<span
|
||||||
aria-hidden="true"
|
aria-label="up"
|
||||||
data-icon="up"
|
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||||
fill="currentColor"
|
role="img"
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
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"
|
aria-hidden="true"
|
||||||
/>
|
data-icon="up"
|
||||||
</svg>
|
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>
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
aria-label="Decrease Value"
|
|
||||||
class="ant-input-number-handler ant-input-number-handler-down"
|
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
|
||||||
<span
|
<span
|
||||||
aria-label="down"
|
aria-disabled="false"
|
||||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
aria-label="Decrease Value"
|
||||||
role="img"
|
class="ant-input-number-handler ant-input-number-handler-down"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<svg
|
<span
|
||||||
aria-hidden="true"
|
aria-label="down"
|
||||||
data-icon="down"
|
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||||
fill="currentColor"
|
role="img"
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
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"
|
aria-hidden="true"
|
||||||
/>
|
data-icon="down"
|
||||||
</svg>
|
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>
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div
|
||||||
<div
|
class="ant-input-number-input-wrap"
|
||||||
class="ant-input-number-input-wrap"
|
>
|
||||||
>
|
<input
|
||||||
<input
|
aria-valuemax="100000"
|
||||||
aria-valuemax="100000"
|
aria-valuemin="1"
|
||||||
aria-valuemin="1"
|
aria-valuenow="3"
|
||||||
aria-valuenow="3"
|
autocomplete="off"
|
||||||
autocomplete="off"
|
class="ant-input-number-input"
|
||||||
class="ant-input-number-input"
|
role="spinbutton"
|
||||||
role="spinbutton"
|
step="1"
|
||||||
step="1"
|
value="3"
|
||||||
value="3"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number ant-input-number-sm"
|
class="ant-space-item"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-input-number-handler-wrap"
|
class="ant-input-number ant-input-number-sm"
|
||||||
>
|
>
|
||||||
<span
|
<div
|
||||||
aria-disabled="false"
|
class="ant-input-number-handler-wrap"
|
||||||
aria-label="Increase Value"
|
|
||||||
class="ant-input-number-handler ant-input-number-handler-up"
|
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
aria-label="up"
|
aria-disabled="false"
|
||||||
class="anticon anticon-up ant-input-number-handler-up-inner"
|
aria-label="Increase Value"
|
||||||
role="img"
|
class="ant-input-number-handler ant-input-number-handler-up"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<svg
|
<span
|
||||||
aria-hidden="true"
|
aria-label="up"
|
||||||
data-icon="up"
|
class="anticon anticon-up ant-input-number-handler-up-inner"
|
||||||
fill="currentColor"
|
role="img"
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
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"
|
aria-hidden="true"
|
||||||
/>
|
data-icon="up"
|
||||||
</svg>
|
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>
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
aria-disabled="false"
|
|
||||||
aria-label="Decrease Value"
|
|
||||||
class="ant-input-number-handler ant-input-number-handler-down"
|
|
||||||
role="button"
|
|
||||||
unselectable="on"
|
|
||||||
>
|
|
||||||
<span
|
<span
|
||||||
aria-label="down"
|
aria-disabled="false"
|
||||||
class="anticon anticon-down ant-input-number-handler-down-inner"
|
aria-label="Decrease Value"
|
||||||
role="img"
|
class="ant-input-number-handler ant-input-number-handler-down"
|
||||||
|
role="button"
|
||||||
|
unselectable="on"
|
||||||
>
|
>
|
||||||
<svg
|
<span
|
||||||
aria-hidden="true"
|
aria-label="down"
|
||||||
data-icon="down"
|
class="anticon anticon-down ant-input-number-handler-down-inner"
|
||||||
fill="currentColor"
|
role="img"
|
||||||
focusable="false"
|
|
||||||
height="1em"
|
|
||||||
viewBox="64 64 896 896"
|
|
||||||
width="1em"
|
|
||||||
>
|
>
|
||||||
<path
|
<svg
|
||||||
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"
|
aria-hidden="true"
|
||||||
/>
|
data-icon="down"
|
||||||
</svg>
|
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>
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
<div
|
||||||
<div
|
class="ant-input-number-input-wrap"
|
||||||
class="ant-input-number-input-wrap"
|
>
|
||||||
>
|
<input
|
||||||
<input
|
aria-valuemax="100000"
|
||||||
aria-valuemax="100000"
|
aria-valuemin="1"
|
||||||
aria-valuemin="1"
|
aria-valuenow="3"
|
||||||
aria-valuenow="3"
|
autocomplete="off"
|
||||||
autocomplete="off"
|
class="ant-input-number-input"
|
||||||
class="ant-input-number-input"
|
role="spinbutton"
|
||||||
role="spinbutton"
|
step="1"
|
||||||
step="1"
|
value="3"
|
||||||
value="3"
|
/>
|
||||||
/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -18,14 +18,14 @@ Display value within it's situation with `formatter`, and we usually use `parser
|
|||||||
> Here is a Intl.NumberFormat InputNumber implementation: [https://codesandbox.io/s/currency-wrapper-antd-input-3ynzo](https://codesandbox.io/s/currency-wrapper-antd-input-3ynzo)
|
> Here is a Intl.NumberFormat InputNumber implementation: [https://codesandbox.io/s/currency-wrapper-antd-input-3ynzo](https://codesandbox.io/s/currency-wrapper-antd-input-3ynzo)
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import { InputNumber } from 'antd';
|
import { InputNumber, Space } from 'antd';
|
||||||
|
|
||||||
function onChange(value) {
|
function onChange(value) {
|
||||||
console.log('changed', value);
|
console.log('changed', value);
|
||||||
}
|
}
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<>
|
<Space>
|
||||||
<InputNumber
|
<InputNumber
|
||||||
defaultValue={1000}
|
defaultValue={1000}
|
||||||
formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
|
formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
|
||||||
@ -40,7 +40,7 @@ ReactDOM.render(
|
|||||||
parser={value => value.replace('%', '')}
|
parser={value => value.replace('%', '')}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
/>
|
/>
|
||||||
</>,
|
</Space>,
|
||||||
mountNode,
|
mountNode,
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|||||||
@ -14,28 +14,18 @@ title:
|
|||||||
There are three sizes available to a numeric input box. By default, the size is `32px`. The two additional sizes are `large` and `small` which means `40px` and `24px`, respectively.
|
There are three sizes available to a numeric input box. By default, the size is `32px`. The two additional sizes are `large` and `small` which means `40px` and `24px`, respectively.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
import { InputNumber } from 'antd';
|
import { InputNumber, Space } from 'antd';
|
||||||
|
|
||||||
function onChange(value) {
|
function onChange(value) {
|
||||||
console.log('changed', value);
|
console.log('changed', value);
|
||||||
}
|
}
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<div className="site-input-number-wrapper">
|
<Space>
|
||||||
<InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={onChange} />
|
<InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={onChange} />
|
||||||
<InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
|
<InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
|
||||||
<InputNumber size="small" min={1} max={100000} defaultValue={3} onChange={onChange} />
|
<InputNumber size="small" min={1} max={100000} defaultValue={3} onChange={onChange} />
|
||||||
</div>,
|
</Space>,
|
||||||
mountNode,
|
mountNode,
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
```css
|
|
||||||
.code-box-demo .ant-input-number {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
.ant-row-rtl .code-box-demo .ant-input-number {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user