mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
docs: Update QR Code basic demo (#41614)
* docs: Update qr code demo * docs: update demo
This commit is contained in:
parent
bea224b71d
commit
1a1fdf0cee
@ -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>
|
||||
`;
|
||||
|
||||
|
@ -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>
|
||||
`;
|
||||
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user