• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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```html
13<!-- xxx.hml-->
14<div class="container">
15  <qrcode value="Hello"></qrcode>
16</div>
17```
18
19
20```css
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![en-us_image_0000001275803133](figures/en-us_image_0000001275803133.png)
33
34> **NOTE**
35>
36> The **value** parameter must be set.
37
38
39## Setting the Component Type
40
41Set the **type** attribute to select the QR code type from rectangle and circle.
42
43
44```html
45<!-- xxx.hml-->
46<div class="container">
47  <select onchange="settype">
48    <option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option>
49  </select>
50  <qrcode value="Hello" type="{{qr_type}}"></qrcode>
51</div>
52```
53
54
55```css
56/* xxx.css */
57.container {
58  width: 100%;
59  height: 100%;
60  flex-direction: column;
61  align-items: center;
62  justify-content: center;
63  background-color: #F1F3F5;
64}
65select{
66  margin-top: 50px;
67  margin-bottom: 50px;
68}
69```
70
71
72```js
73// index.js
74export default {
75  data: {
76    qr_type: 'rect',
77    bcol_list: ['rect','circle']
78  },
79  settype(e) {
80    this.qr_type = e.newValue
81  },
82}
83```
84
85![en-us_image_0000001275922965](figures/en-us_image_0000001275922965.gif)
86
87
88## Setting Styles
89
90Set the **color** and **background-color** attributes to set the color and background color of a QR code.
91
92
93```html
94<!-- xxx.hml-->
95<div class="container">
96  <qrcode value="Hello" type="rect"></qrcode>
97</div>
98```
99
100
101```css
102/* xxx.css */
103.container {
104  width: 100%;
105  height: 100%;
106  flex-direction: column;
107  align-items: center;
108  justify-content: center;
109  background-color: #F1F3F5;
110}
111qrcode{
112  width: 300px;
113  height: 300px;
114 color: blue;  background-color: #ffffff;
115}
116```
117
118![en-us_image_0000001231683116](figures/en-us_image_0000001231683116.png)
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```html
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```css
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```js
159// index.js
160export default{
161  data: {
162    textVal: ''
163  },
164  change(e){
165    this.textVal = e.value
166  }
167}
168```
169
170![en-us_image_0000001232002972](figures/en-us_image_0000001232002972.gif)
171