• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Popup
2
3
4You can bind the **Popup** attribute to a component to create a popup, specifying its content and interaction logic, and display state. It is mainly used for screen recording and message notification.
5
6
7Popups can be defined with [PopupOptions](../reference/arkui-ts/ts-universal-attributes-popup.md#popupoptions) or [CustomPopupOptions](../reference/arkui-ts/ts-universal-attributes-popup.md#custompopupoptions8). In **PopupOptions**, you can set **primaryButton** and **secondaryButton** to include buttons in the popup. In **CustomPopupOptions**, you can create a custom popup through the [builder](../quick-start/arkts-builder.md) parameter.
8
9
10## Text Popup
11
12Text popups are usually used to display text only and do not allow for user interactions. Bind the **Popup** attribute to a component. When the **show** parameter in the **bindPopup** attribute is set to **true**, a popup is displayed.
13
14If you bind the **Popup** attribute to a **\<Button>** component, each time the **\<Button>** button is clicked, the Boolean value of **handlePopup** changes. When it changes to **true**, the popup is displayed.
15
16```ts
17@Entry
18@Component
19struct PopupExample {
20  @State handlePopup: boolean = false
21
22  build() {
23    Column() {
24      Button('PopupOptions')
25        .onClick(() => {
26          this.handlePopup = !this.handlePopup
27        })
28        .bindPopup(this.handlePopup, {
29          message: 'This is a popup with PopupOptions',
30        })
31    }.width('100%').padding({ top: 5 })
32  }
33}
34```
35
36
37![en-us_image_0000001511740524](figures/en-us_image_0000001511740524.png)
38
39## Adding an Event for Popup State Changes
40
41You can use the **onStateChange** parameter to add an event callback for popup state changes, so as to determine the current state of the popup.
42
43```ts
44@Entry
45@Component
46struct PopupExample {
47  @State handlePopup: boolean = false
48
49  build() {
50    Column() {
51      Button('PopupOptions')
52        .onClick(() => {
53          this.handlePopup = !this.handlePopup
54        })
55        .bindPopup(this.handlePopup, {
56          message: 'This is a popup with PopupOptions',
57          onStateChange: (e)=> {// Return the current popup state.
58            if (!e.isVisible) {
59              this.handlePopup = false
60            }
61          }
62        })
63    }.width('100%').padding({ top: 5 })
64  }
65}
66```
67
68![PopupOnStateChange](figures/PopupOnStateChange.gif)
69
70## Popup with a Button
71
72You can add a maximum of two buttons to a popup through the **primaryButton** and **secondaryButton** attributes. For each of the buttons, you can set the **action** parameter to specify the operation to be triggered.
73
74```ts
75@Entry
76@Component
77struct PopupExample22 {
78  @State handlePopup: boolean = false
79
80  build() {
81    Column() {
82      Button('PopupOptions').margin({ top: 200 })
83        .onClick(() => {
84          this.handlePopup = !this.handlePopup
85        })
86        .bindPopup(this.handlePopup, {
87          message: 'This is a popup with PopupOptions',
88          primaryButton: {
89            value: 'Confirm',
90            action: () => {
91              this.handlePopup = !this.handlePopup
92              console.info('confirm Button click')
93            }
94          },
95          secondaryButton: {
96            value: 'Cancel',
97            action: () => {
98              this.handlePopup = !this.handlePopup
99            }
100          },
101          onStateChange: (e) => {
102            if (!e.isVisible) {
103              this.handlePopup = false
104            }
105          }
106        })
107    }.width('100%').padding({ top: 5 })
108  }
109}
110```
111
112
113![en-us_other_0000001500740342](figures/en-us_other_0000001500740342.jpeg)
114
115
116## Custom Popup
117
118You can create a custom popup with **CustomPopupOptions**, defining custom content in \@Builder. In addition, you can use parameters such as **popupColor** to control the popup style.
119
120```ts
121@Entry
122@Component
123struct Index {
124  @State customPopup: boolean = false
125  // Define the popup content in the popup builder.
126  @Builder popupBuilder() {
127    Row({ space: 2 }) {
128      Image($r("app.media.icon")).width(24).height(24).margin({ left: 5 })
129      Text('This is Custom Popup').fontSize(15)
130    }.width(200).height(50).padding(5)
131  }
132  build() {
133    Column() {
134      Button('CustomPopupOptions')
135        .position({x:100,y:200})
136        .onClick(() => {
137          this.customPopup = !this.customPopup
138        })
139        .bindPopup(this.customPopup, {
140          builder: this.popupBuilder, // Content of the popup.
141          placement:Placement.Bottom, // Position of the popup.
142          popupColor:Color.Pink // Background color of the popup.
143          onStateChange: (e) => {
144            console.info(JSON.stringify(e.isVisible))
145            if (!e.isVisible) {
146              this.customPopup = false
147            }
148          }
149        })
150    }
151    .height('100%')
152  }
153}
154```
155
156
157To place the popup in a specific position, set the **placement** parameter. The popup builder triggers a popup message to instruct the user to complete the operation.
158
159
160![en-us_other_0000001500900234](figures/en-us_other_0000001500900234.jpeg)
161