• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Bubble
2
3
4You can bind the **Popup** attribute to a component, specifying its content, interaction logic, and display status. It is mainly used for screen recording and message pop-up notification.
5
6
7Bubbles are classified into two types: built-in bubbles with [PopupOptions](../reference/arkui-ts/ts-universal-attributes-popup.md#popupoptions) and custom bubbles with [CustomPopupOptions](../reference/arkui-ts/ts-universal-attributes-popup.md#custompopupoptions8). For PopupOptions, you can set primaryButton and secondaryButton to set bubbles with buttons. CustomPopupOptions sets the customized bubble by configuring the [builder](../quick-start/arkts-builder.md) parameter.
8
9
10## Text prompt bubble
11
12Text pop-up messages are usually used to display only text messages without any interaction. The Popup attribute needs to be bound to a component. When the show parameter in the bindPopup attribute is set to true, a pop-up message is displayed.
13
14Bind the Popup attribute to the Button component. Each time the Button button is clicked, handlePopup switches the Boolean value. When handlePopup is set to true, bindPopup pops up.
15
16
17
18```ts
19@Entry
20@Component
21struct PopupExample {
22  @State handlePopup: boolean = false
23
24  build() {
25    Column() {
26      Button('PopupOptions')
27        .onClick(() => {
28          this.handlePopup = !this.handlePopup
29        })
30        .bindPopup(this.handlePopup, {
31          message: 'This is a popup with PopupOptions',
32        })
33    }.width('100%').padding({ top: 5 })
34  }
35}
36```
37
38
39![en-us_image_0000001511740524](figures/en-us_image_0000001511740524.png)
40
41
42## Bubble with a button
43
44A maximum of two buttons can be set for a bubble through the primaryButton and secondaryButton attributes for simple interaction. Developers can set the action parameter to specify the operation to be triggered.
45
46
47
48```ts
49@Entry
50@Component
51struct PopupExample22 {
52  @State handlePopup: boolean = false
53  build() {
54    Column() {
55      Button('PopupOptions').margin({top:200})
56        .onClick(() => {
57          this.handlePopup = !this.handlePopup
58        })
59        .bindPopup(this.handlePopup, {
60          message: 'This is a popup with PopupOptions',
61          primaryButton:{
62            value:'Confirm',
63            action: () => {
64              this.handlePopup = !this.handlePopup
65              console.info('confirm Button click')
66            }
67          },
68          secondaryButton: {
69            value: 'Cancel',
70            action: () => {
71              this.handlePopup = !this.handlePopup
72            }
73          },
74        })
75    }.width('100%').padding({ top: 5 })
76  }
77}
78```
79
80
81![en-us_other_0000001500740342](figures/en-us_other_0000001500740342.jpeg)
82
83
84## Custom Bubbles
85
86Developers can use the builder CustomPopupOptions to create customized bubbles. \@Builder can store customized content. In addition, parameters such as popupColor can be used to control the bubble style.
87
88
89
90```ts
91@Entry
92@Component
93struct Index {
94  @State customPopup: boolean = false
95  // The popup constructor defines the dialog box content.
96  @Builder popupBuilder() {
97    Row({ space: 2 }) {
98      Image($r("app.media.icon")).width(24).height(24).margin({ left: 5 })
99      Text('This is Custom Popup').fontSize(15)
100    }.width(200).height(50).padding(5)
101  }
102  build() {
103    Column() {
104      Button('CustomPopupOptions')
105        .position({x:100,y:200})
106        .onClick(() => {
107          this.customPopup = !this.customPopup
108        })
109        .bindPopup(this.customPopup, {
110          builder: this.popupBuilder, // Content of the bubble
111          placement:Placement.Bottom, // Pop-up position of the bubble
112          popupColor:Color.Pink // Background color of the bubble
113        })
114    }
115    .height('100%')
116  }
117}
118```
119
120
121You can set the placement parameter to place the pop-up bubble in the required position. The pop-up window constructor triggers a pop-up message to guide the user to complete the operation, providing better UI experience for the user.
122
123
124![en-us_other_0000001500900234](figures/en-us_other_0000001500900234.jpeg)
125
126
127
128```ts
129@Entry
130@Component
131struct Index {
132  @State customPopup: boolean = false
133  // The popup constructor defines the dialog box content.
134  @Builder popupBuilder() {
135    Row({ space: 2 }) {
136      Image('/images/shengWhite.png').width(30).objectFit(ImageFit.Contain)
137      Column(){
138        Text('Control Life') .fontSize(14).fontWeight(900).fontColor(Color.White).width('100%')
139        Text('When you want to sing, tens of millions of songs can be selected and the voice can be adjusted.').fontSize(12).fontColor('#ffeeeeee').width('100%')
140      }
141    }.width(230).height(80).padding(5)
142  }
143  build() {
144    Row() {
145      Text ('I would like to sing a song')
146      Image('/images/sheng.png').width(35).objectFit(ImageFit.Contain)
147        .onClick(() => {
148          this.customPopup = !this.customPopup
149        })
150        .bindPopup(this.customPopup, {
151          builder: this.popupBuilder,
152        })
153    }
154    .margin(20)
155    .height('100%')
156  }
157}
158```
159