1# QRCode 2 3The **\<QRCode>** component is used to display a QR code. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17QRCode(value: string) 18 19Since API version 9, this API is supported in ArkTS widgets. 20 21**Parameters** 22 23| Name| Type| Mandatory| Description| 24| -------- | -------- | -------- | -------- | 25| value | string | Yes| Content of the QR code.| 26 27## Attributes 28 29In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 30 31| Name| Type| Description| 32| -------- | -------- | -------- | 33| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the QR code.<br>Default value: **Color.Black**<br>Since API version 9, this API is supported in ArkTS widgets.| 34| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the QR code.<br>Default value: **Color.White**<br>Since API version 9, this API is supported in ArkTS widgets.| 35 36 37## Events 38 39Among the universal events, the [click event](ts-universal-events-click.md), [touch event](ts-universal-events-touch.md), and [show/hide event](ts-universal-events-show-hide.md) are supported. 40 41 42## Example 43 44```ts 45// xxx.ets 46@Entry 47@Component 48struct QRCodeExample { 49 private value: string = 'hello world' 50 build() { 51 Column({ space: 5 }) { 52 Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) 53 QRCode(this.value).width(200).height(200) 54 55 // Set the color for the QR code. 56 Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) 57 QRCode(this.value).color(0xF7CE00).width(200).height(200) 58 59 // Set the background color for the QR code. 60 Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) 61 QRCode(this.value).width(200).height(200).backgroundColor(Color.Orange) 62 }.width('100%').margin({ top: 5 }) 63 } 64} 65``` 66 67![qrcode](figures/qrcode.png) 68