mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 03:22:59 +08:00
Code Issues Actions 38 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`] = ` 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 <div
class="ant-input-number" class="ant-input-number"
> >
@ -983,7 +989,11 @@ Array [
value="$ 1,000" value="$ 1,000"
/> />
</div> </div>
</div>, </div>
</div>
<div
class="ant-space-item"
>
<div <div
class="ant-input-number" class="ant-input-number"
> >
@ -1059,8 +1069,9 @@ Array [
value="100%" value="100%"
/> />
</div> </div>
</div>, </div>
] </div>
</div>
`; `;
exports[`renders ./components/input-number/demo/keyboard.md correctly 1`] = ` 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`] = ` 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
class="ant-space-item"
style="margin-right:8px"
> >
<div <div
class="ant-input-number ant-input-number-lg" 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>
</div>
<div
class="ant-space-item"
style="margin-right:8px"
>
<div <div
class="ant-input-number" class="ant-input-number"
> >
@ -1430,6 +1450,10 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
/> />
</div> </div>
</div> </div>
</div>
<div
class="ant-space-item"
>
<div <div
class="ant-input-number ant-input-number-sm" 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>
</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) > 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,
); );
``` ```

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. 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;
}
```