1# <qrcode> Development 2 3 4The **<qrcode>** component is used to generate and display a QR code. For details, see [qrcode](../reference/arkui-js/js-components-basic-qrcode.md). 5 6 7## Creating a <qrcode> Component 8 9Create a **<qrcode>** component in the .hml file under **pages/index**. 10 11 12``` 13<!-- xxx.hml--> 14<div class="container"> 15 <qrcode value="Hello"></qrcode> 16</div> 17``` 18 19 20``` 21/* xxx.css */ 22.container { 23 width: 100%; 24 height: 100%; 25 flex-direction: column; 26 align-items: center; 27 justify-content: center; 28 background-color: #F1F3F5; 29} 30``` 31 32 33 34>  **NOTE:** 35> The **value** parameter must be set. 36 37 38## Setting the Component Type 39 40Set the **type** attribute to select the QR code type from rectangle and circle. 41 42 43``` 44<!-- xxx.hml--> 45<div class="container"> 46 <select onchange="settype"> 47 <option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option> 48 </select> 49 <qrcode value="Hello" type="{{qr_type}}"></qrcode> 50</div> 51``` 52 53 54``` 55/* xxx.css */ 56.container { 57 width: 100%; 58 height: 100%; 59 flex-direction: column; 60 align-items: center; 61 justify-content: center; 62 background-color: #F1F3F5; 63} 64select{ 65 margin-top: 50px; 66 margin-bottom: 50px; 67} 68``` 69 70 71``` 72// index.js 73export default { 74 data: { 75 qr_type: 'rect', 76 bcol_list: ['rect','circle'] 77 }, 78 settype(e) { 79 this.qr_type = e.newValue 80 }, 81} 82``` 83 84 85 86 87## Setting Styles 88 89Set the **color** and **background-color** attributes to set the color and background color of a QR code. 90 91 92``` 93<!-- xxx.hml--> 94<div class="container"> 95 <qrcode value="Hello" type="rect"></qrcode> 96</div> 97``` 98 99 100``` 101/* xxx.css */ 102.container { 103 width: 100%; 104 height: 100%; 105 flex-direction: column; 106 align-items: center; 107 justify-content: center; 108 background-color: #F1F3F5; 109} 110qrcode{ 111 width: 300px; 112 height: 300px; 113 color: blue; 114 background-color: #ffffff; 115} 116``` 117 118 119 120>  **NOTE:** 121> - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is center displayed. 122> 123> - If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length of 200 px is used. 124> 125 126 127## Example Scenario 128 129In this example, you can bind a QR code to a text box, and change the QR code by replacing the content in the text box. 130 131 132``` 133<!-- xxx.hml--> 134<div class="container"> 135 <input style="margin-bottom: 100px;" onchange="change"></input> 136 <qrcode value="{{textVal}}"></qrcode> 137</div> 138``` 139 140 141``` 142/* xxx.css */ 143.container { 144 width: 100%; 145 height: 100%; 146 flex-direction: column; 147 align-items: center; 148 justify-content: center; 149 background-color: #F1F3F5; 150} 151qrcode{ 152 width: 400px; 153 height: 400px; 154} 155``` 156 157 158``` 159// index.js 160export default{ 161 data: { 162 textVal: '' 163 }, 164 change(e){ 165 this.textVal = e.value 166 } 167} 168``` 169 170 171
