mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +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`] = `
|
exports[`renders components/qrcode/demo/base.tsx extend context correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-qrcode"
|
class="ant-space ant-space-vertical ant-space-align-center"
|
||||||
style="width: 160px; height: 160px;"
|
|
||||||
>
|
>
|
||||||
<canvas
|
<div
|
||||||
height="134"
|
class="ant-space-item"
|
||||||
style="height: 134px; width: 134px;"
|
style="margin-bottom: 8px;"
|
||||||
width="134"
|
>
|
||||||
/>
|
<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>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -11,14 +11,34 @@ exports[`renders components/qrcode/demo/Popover.tsx correctly 1`] = `
|
|||||||
|
|
||||||
exports[`renders components/qrcode/demo/base.tsx correctly 1`] = `
|
exports[`renders components/qrcode/demo/base.tsx correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-qrcode"
|
class="ant-space ant-space-vertical ant-space-align-center"
|
||||||
style="width:160px;height:160px"
|
|
||||||
>
|
>
|
||||||
<canvas
|
<div
|
||||||
height="134"
|
class="ant-space-item"
|
||||||
style="height:134px;width:134px"
|
style="margin-bottom:8px"
|
||||||
width="134"
|
>
|
||||||
/>
|
<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>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -1,6 +1,20 @@
|
|||||||
|
import { Input, QRCode, Space } from 'antd';
|
||||||
import React from 'react';
|
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;
|
export default App;
|
||||||
|
Loading…
Reference in New Issue
Block a user