• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Adding Interactions
2
3You can make the UI interactive by binding events to components. This section describes how to bind **\<div>**, **\<text>**, and **\<image>** components to click events to build a thumb up button, as shown in the following figure.
4
5**Figure 1** Thumb up button effect
6
7![en-us_image_0000001267647901](figures/en-us_image_0000001267647901.gif)
8
9
10The thumb up button is implemented by binding a click event to a &lt;div&gt; component. The \<div> component contains an **\<image>** component and a \<text> component.
11
12
13- The **\<image>** component is used to display unselected and selected (highlighted) thumbs up images. The click event function alternately updates the paths of the images that are liked and not liked.
14
15- The **\<text>** component is used to display the number of thumbs up. The number is updated in the function of the click event.
16
17
18The click event calls the **likeClick()** function defined in the .js file. You can change the value of **isPressed** to update the image component. If the value of **isPressed** is **true**, the number of thumbs up is incremented by 1. The **likeClick()** function takes effect on the **\<div>** component in the .hml file. The style of each child component for the thumbs up button is set in the .css file. The following is an example:
19
20
21```html
22<!-- xxx.hml -->
23<!-- Thumb up button -->
24<div>
25  <div class="like" onclick="likeClick">
26    <image class="like-img" src="{{likeImage}}" focusable="true"></image>
27    <text class="like-num" focusable="true">{{total}}</text>
28  </div>
29</div>
30```
31
32
33```css
34/* xxx.css */
35.like {
36  width: 104px;
37  height: 54px;
38  border: 2px solid #bcbcbc;
39  justify-content: space-between;
40  align-items: center;
41  margin-left: 72px;
42  border-radius: 8px;
43}
44.like-img {
45  width: 33px;
46  height: 33px;
47  margin-left: 14px;
48}
49.like-num {
50  color: #bcbcbc;
51  font-size: 20px;
52  margin-right: 17px;
53}
54```
55
56
57```js
58// xxx.js
59export default {
60  data: {
61    likeImage: '/common/unLike.png',
62    isPressed: false,
63    total: 20,
64  },
65  likeClick() {
66    var temp;
67    if (!this.isPressed) {
68      temp = this.total + 1;
69      this.likeImage = '/common/like.png';
70    } else {
71      temp = this.total - 1;
72      this.likeImage = '/common/unLike.png';
73    }
74    this.total = temp;
75    this.isPressed = !this.isPressed;
76  },
77}
78```
79
80
81ArkUI also provides many form components, such as switches, tags, and pickers, for you to flexibly lay out pages and improve their interactions with users. For details, see **Container Components**.
82