b534c1ecb4
* fet: QRCode support type(renderAs) * fet: QRCode support type(renderAs) * fet: QRCode support type(renderAs) * fet: QRCode support type(renderAs) * fix: Improve type.md, export QRProps * Update components/qrcode/demo/type.md Co-authored-by: lijianan <574980606@qq.com> * Update components/qrcode/index.tsx Co-authored-by: lijianan <574980606@qq.com> * fix: qrCodeProps * fix: qrcode snap * Update components/qrcode/demo/type.md Co-authored-by: lijianan <574980606@qq.com> * fix: QRCode docs * fix: QRCode demo * Update components/qrcode/demo/download.tsx Co-authored-by: lijianan <574980606@qq.com> * Update components/qrcode/demo/download.tsx Co-authored-by: lijianan <574980606@qq.com> * fix: QRCode snap * fix: QRCode snap * fix: 恢复下载示例 --------- Co-authored-by: lijianan <574980606@qq.com>
2.8 KiB
| category | title | cover | coverDark | demo | group | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Components | QRCode | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M4PBTZ_n9OgAAAAAAAAAAAAADrJ8AQ/original |
|
|
Components that can convert text into QR codes, and support custom color and logo. Available since antd@5.1.0.
When To Use
Used when the text needs to be converted into a QR Code.
Examples
base
With Icon
other status
Custom Render Type
Custom Size
Custom Color
Download QRCode
Error Level
Advanced Usage
API
This component is available since
antd@5.1.0
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| value | scanned text | string | - | |
| type | render type | canvas | svg |
canvas |
5.6.0 |
| icon | include image url (only image link are supported) | string | - | |
| size | QRCode size | number | 128 | |
| iconSize | include image size | number | 32 | |
| color | QRCode Color | string | #000 |
|
| bgColor | QRCode Background Color | string | transparent |
5.5.0 |
| bordered | Whether has border style | boolean | true |
|
| errorLevel | Error Code Level | 'L' | 'M' | 'Q' | 'H' |
M |
|
| status | QRCode status | active | expired | loading |
active |
|
| onRefresh | callback | () => void |
- |
Design Token
FAQ
About QRCode ErrorLevel
The ErrorLevel means that the QR code can be scanned normally after being blocked, and the maximum area that can be blocked is the error correction rate.
Generally, the QR code is divided into 4 error correction levels: Level L can correct about 7% errors, Level M can correct about 15% errors, Level Q can correct about 25% errors, and Level H can correct about 30% errors. When the content encoding of the QR code carries less information, in other words, when the value link is short, set different error correction levels, and the generated image will not change.
For more information, see the: https://www.qrcode.com/en/about/error_correction