mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-12-11 23:00:20 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity
739362345c
ant-design/components/qr-code/index.en-US.md
二货爱吃白萝卜 20561d6f9d
docs: Fix component doc alignment & support import usage (#48004) 
* docs: init ref

* docs all support

* docs: fix link show
2024-03-22 14:22:42 +08:00

2.9 KiB
Raw Blame History

category title description cover coverDark demo group tag
Components QRCode Components that can convert text into QR codes, and support custom color and logo. https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M4PBTZ_n9OgAAAAAAAAAAAAADrJ8AQ/original
cols
2
title order
Data Display 5
New

Available since antd@5.1.0.

:::info If the QR code cannot be scanned for identification, it may be because the link address is too long, which leads to too dense pixels. You can configure the QR code to be larger through size, or shorten the link through short link services. :::

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

Common props ref：Common props

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 160
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 | scanned active scanned: 5.13.0
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