• 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
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## Popup with a Button
43
44You 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.
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 Popup
85
86You 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.
87
88
89
90```ts
91@Entry
92@Component
93struct Index {
94  @State customPopup: boolean = false
95  // Define the popup content in the popup builder.
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 popup.
111          placement:Placement.Bottom, // Position of the popup.
112          popupColor:Color.Pink // Background color of the popup.
113        })
114    }
115    .height('100%')
116  }
117}
118```
119
120
121To 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.
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  // Define the popup content in the popup builder.
134  @Builder popupBuilder() {
135    Row({ space: 2 }) {
136      Image('/images/shengWhite.png').width(30).objectFit(ImageFit.Contain)
137      Column(){
138        Text('Savor Life').fontSize(14).fontWeight(900).fontColor(Color.White).width('100%')
139        Text('A treasure trove of sing-along songs').fontSize(12).fontColor('#ffeeeeee').width('100%')
140      }
141    }.width(230).height(80).padding(5)
142  }
143  build() {
144    Row() {
145      Text ('Sing along')
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