Browse Source
docs: Update QR Code basic demo (#41614)
* docs: Update qr code demo
* docs: update demo
pull/41622/head
二货爱吃白萝卜
2 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with
70 additions and
16 deletions
-
components/qrcode/__tests__/__snapshots__/demo-extend.test.ts.snap
-
components/qrcode/__tests__/__snapshots__/demo.test.ts.snap
-
components/qrcode/demo/base.tsx
|
|
|
@ -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; |
|
|
|
|
