mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-16 09:39:10 +08:00
5bf08faeea
* refactor: rename qrcode to qr-code * test: patch test case * chore: fix Form missing displayName * chore: patch displayName * chore: style path * chore: fix compile
50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
|
|
import { QRCode, Button } from 'antd';
|
|
|
|
const App: React.FC = () => {
|
|
const [size, setSize] = useState<number>(160);
|
|
|
|
const increase = () => {
|
|
setSize((prevSize) => {
|
|
const newSize = prevSize + 10;
|
|
if (newSize > 300) {
|
|
return 300;
|
|
}
|
|
return newSize;
|
|
});
|
|
};
|
|
|
|
const decline = () => {
|
|
setSize((prevSize) => {
|
|
const newSize = prevSize - 10;
|
|
if (newSize < 48) {
|
|
return 48;
|
|
}
|
|
return newSize;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Button.Group style={{ marginBottom: 16 }}>
|
|
<Button onClick={decline} disabled={size <= 48} icon={<MinusOutlined />}>
|
|
Smaller
|
|
</Button>
|
|
<Button onClick={increase} disabled={size >= 300} icon={<PlusOutlined />}>
|
|
Larger
|
|
</Button>
|
|
</Button.Group>
|
|
<QRCode
|
|
errorLevel="H"
|
|
size={size}
|
|
iconSize={size / 4}
|
|
value="https://ant.design/"
|
|
icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|