docs: Update QR Code basic demo (#41614)

* docs: Update qr code demo

* docs: update demo
This commit is contained in:
二货爱吃白萝卜 2023-04-03 22:34:05 +08:00 committed by GitHub
parent bea224b71d
commit 1a1fdf0cee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 70 additions and 16 deletions

View File

@ -46,14 +46,34 @@ Array [
exports[`renders components/qrcode/demo/base.tsx extend context correctly 1`] = `
<div
class="ant-qrcode"
style="width: 160px; height: 160px;"
class="ant-space ant-space-vertical ant-space-align-center"
>
<canvas
height="134"
style="height: 134px; width: 134px;"
width="134"
/>
<div
class="ant-space-item"
style="margin-bottom: 8px;"
>
<div
class="ant-qrcode"
style="width: 160px; height: 160px;"
>
<canvas
height="134"
style="height: 134px; width: 134px;"
width="134"
/>
</div>
</div>
<div
class="ant-space-item"
>
<input
class="ant-input"
maxlength="60"
placeholder="-"
type="text"
value="https://ant.design/"
/>
</div>
</div>
`;

View File

@ -11,14 +11,34 @@ exports[`renders components/qrcode/demo/Popover.tsx correctly 1`] = `
exports[`renders components/qrcode/demo/base.tsx correctly 1`] = `
<div
class="ant-qrcode"
style="width:160px;height:160px"
class="ant-space ant-space-vertical ant-space-align-center"
>
<canvas
height="134"
style="height:134px;width:134px"
width="134"
/>
<div
class="ant-space-item"
style="margin-bottom:8px"
>
<div
class="ant-qrcode"
style="width:160px;height:160px"
>
<canvas
height="134"
style="height:134px;width:134px"
width="134"
/>
</div>
</div>
<div
class="ant-space-item"
>
<input
class="ant-input"
maxlength="60"
placeholder="-"
type="text"
value="https://ant.design/"
/>
</div>
</div>
`;

View File

@ -1,6 +1,20 @@
import { Input, QRCode, Space } from 'antd';
import React from 'react';
import { QRCode } from 'antd';
const App: React.FC = () => <QRCode value="https://ant.design/" />;
const App: React.FC = () => {
const [text, setText] = React.useState('https://ant.design/');
return (
<Space direction="vertical" align="center">
<QRCode value={text || '-'} />
<Input
placeholder="-"
maxLength={60}
value={text}
onChange={(e) => setText(e.target.value)}
/>
</Space>
);
};
export default App;