mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-08 01:53:34 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

docs: use space for InputNunber demo (#32273)

Browse Source
This commit is contained in:
xrkffgg 2021-09-24 12:25:31 +08:00 committed by GitHub
parent 4054c767cd
commit ee5b395d35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 339 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
components/input-number/__tests__/__snapshots__/demo.test.js.snap
View File

@ -909,7 +909,13 @@ Array [
`;
exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
Array [
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<div
class="ant-input-number"
>
@ -983,7 +989,11 @@ Array [
value="$ 1,000"
/>
</div>
</div>,
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-input-number"
>
@ -1059,8 +1069,9 @@ Array [
value="100%"
/>
</div>
</div>,
]
</div>
</div>
</div>
`;
exports[`renders ./components/input-number/demo/keyboard.md correctly 1`] = `
@ -1276,7 +1287,11 @@ exports[`renders ./components/input-number/demo/out-of-range.md correctly 1`] =
exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
<div
class="site-input-number-wrapper"
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<div
class="ant-input-number ant-input-number-lg"
@ -1354,6 +1369,11 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
/>
</div>
</div>
</div>
<div
class="ant-space-item"
style="margin-right:8px"
>
<div
class="ant-input-number"
>
@ -1430,6 +1450,10 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
/>
</div>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-input-number ant-input-number-sm"
>
@ -1507,4 +1531,5 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
</div>
</div>
</div>
</div>
`;

6
components/input-number/demo/formatter.md
View File

@ -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)
```jsx
import { InputNumber } from 'antd';
import { InputNumber, Space } from 'antd';
function onChange(value) {
console.log('changed', value);
}
ReactDOM.render(
<>
<Space>
<InputNumber
defaultValue={1000}
formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
@ -40,7 +40,7 @@ ReactDOM.render(
parser={value => value.replace('%', '')}
onChange={onChange}
/>
</>,
</Space>,
mountNode,
);
```

16
components/input-number/demo/size.md
View File

@ -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.
```jsx
import { InputNumber } from 'antd';
import { InputNumber, Space } from 'antd';
function onChange(value) {
console.log('changed', value);
}
ReactDOM.render(
<div className="site-input-number-wrapper">
<Space>
<InputNumber size="large" 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} />
</div>,
</Space>,
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;
}
```