1# Popup Control 2 3You can bind a popup to a component, specifying its content, interaction logic, and visibility. 4 5> **NOTE** 6> 7> - This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> - The visibility of the popup is returned through the **onStateChange** event callback. There is no strong mapping between the visibility and the creation or destruction of the component. 10 11## bindPopup 12 13bindPopup(show: boolean, popup: PopupOptions | CustomPopupOptions) 14 15Binds a popup to the component. 16 17**Atomic service API**: This API can be used in atomic services since API version 11. 18 19**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21**Parameters** 22 23| Name | Type | Mandatory | Description | 24| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 25| show | boolean | Yes | Whether to show the popup. The default value is **false**, indicating that the popup is hidden. As the popup can be displayed only after building of all pages is completed, **show** cannot be set to **true** during page building. Otherwise, the display position and shape of the popup will be incorrect. | 26| popup | [PopupOptions](#popupoptions) \| [CustomPopupOptions](#custompopupoptions8)<sup>8+</sup> | Yes | Parameters of the popup. | 27 28## PopupOptions 29 30| Name | Type | Mandatory | Description | 31| ------------------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 32| message | string | Yes | Content of the popup message.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 33| placementOnTop<sup>(deprecated)</sup> | boolean | No | Whether to display the popup above the component. The default value is **false**.<br>**NOTE**<br>This API is deprecated since API version 10. You are advised to use **placement** instead. | 34| primaryButton | {<br>value: string,<br>action: () => void<br>} | No | Primary button.<br>**value**: text of the primary button in the popup.<br>**action**: callback for clicking the primary button.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 35| secondaryButton | {<br>value: string,<br>action: () => void<br>} | No | Secondary button.<br>**value**: text of the secondary button in the popup.<br>**action**: callback for clicking the secondary button.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 36| onStateChange | (event: { isVisible: boolean }) => void | No | Callback for the popup status change event. The parameter **isVisible** indicates whether the popup is visible.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 37| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | No | Offset of the popup arrow relative to the popup. When the arrow is at the top or bottom of the popup: The value **0** indicates that the arrow is located on the leftmost, and any other value indicates the distance from the arrow to the leftmost; the arrow is centered by default. When the arrow is on the left or right side of the popup: The value indicates the distance from the arrow to the top; the arrow is centered by default. When the popup is displayed on either edge of the screen, it will automatically deviate leftward or rightward to stay within the safe area. When the value is 0, the arrow always points to the bound component.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 38| showInSubWindow<sup>9+</sup> | boolean | No | Whether to show the popup in the subwindow. The default value is **false**.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 39| mask<sup>10+</sup> | boolean \| { color : [ResourceColor](ts-types.md#resourcecolor) }| No | Whether to apply a mask to the popup. The value **true** means to apply a transparent mask to the popup, **false** means not to apply a mask to the popup, and a color value means to apply a mask in the corresponding color to the popup.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 40| messageOptions<sup>10+</sup> | [PopupMessageOptions](#popupmessageoptions10) | No | Parameters of the popup message.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 41| targetSpace<sup>10+</sup> | [Length](ts-types.md#length) | No | Space between the popup and the target.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 42| placement<sup>10+</sup> | [Placement](ts-appendix-enums.md#placement8) | No | Position of the popup relative to the target. The default value is **Placement.Bottom**.<br>If both **placementOnTop** and **placement** are set, the latter prevails.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 43| offset<sup>10+</sup> | [Position](ts-types.md#position) | No | Offset of the popup relative to the display position specified by **placement**.<br>**NOTE**<br>This parameter cannot be set in percentage.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 44| enableArrow<sup>10+</sup> | boolean | No | Whether to display the arrow.<br>Default value: **true**<br>**NOTE**<br>If the available space on the screen cannot is insufficient, the popup will cover part of the component and the arrow will not be displayed.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 45| popupColor<sup>11+</sup> | [Color](ts-appendix-enums.md#color) \| string \| number \| [Resource](ts-types.md#resource) | No | Color of the popup. To remove the background blur, set **backgroundBlurStyle** to **BlurStyle.NONE**.<br>Default value: [TRANSPARENT](ts-appendix-enums.md#color) plus [COMPONENT_ULTRA_THICK](ts-appendix-enums.md#blurstyle9)<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 46| autoCancel<sup>11+</sup> | boolean | No | Whether to automatically close the popup when an operation is performed on the page.<br>Default value: **true**<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 47| width<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | No | Width of the popup.<br>**NOTE**<br>When **showInSubWindow** is set to **true**, the maximum height of the popup is the height of the device screen. When **showInSubWindow** is set to **false**, the maximum height is the height of the application window. Allowable height = Maximum height – Status bar height (0 if there is no status bar) – Dock height (0 if there is no dock) – 40 VP – 40 VP.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 48| arrowPointPosition<sup>11+</sup> | [ArrowPointPosition](ts-appendix-enums.md#arrowpointposition11) | No | Position of the popup arrow relative to its parent component. Available positions are **Start**, **Center**, and **End**, in both vertical and horizontal directions. All these positions are within the parent component area.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 49| arrowWidth<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | No | Arrow thickness. If the arrow thickness exceeds the length of the edge minus twice the size of the popup rounded corner, the arrow is not drawn.<br>Default value: **16.0_vp**<br>**NOTE**<br>This parameter cannot be set in percentage.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 50| arrowHeight<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | No | Arrow height.<br>Default value: **8.0_vp**<br>**NOTE**<br>This parameter cannot be set in percentage.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 51| radius<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | No | Rounded corner radius of the popup.<br>Default value: **20.0_vp**<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 52| shadow<sup>11+</sup> | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10) | No | Popup shadow.<br>Default value: **ShadowStyle.OUTER_DEFAULT_MD**<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 53| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-appendix-enums.md#blurstyle9) | No | Background blur style of the popup.<br>Default value: **BlurStyle.COMPONENT_ULTRA_THICK**<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 54| transition<sup>12+</sup> | [TransitionEffect](ts-transition-animation-component.md#transitioneffect10) | No | Transition effect for the entrance and exit of the popup.<br>**NOTE**<br>1. If this parameter is not set, the default effect is used.<br>2. Touching the Back button during the entrance animation pauses the entrance animation and starts the exit animation. The final effect is one obtained after the curves of the entrance and exit animations are combined.<br>3. Touching the Back button during the exit animation does not affect the animation playback. The Back button does not respond.| 55| onWillDismiss<sup>12+</sup> | boolean\|(dismissPopupAction: [DismissPopupAction](#dismisspopupaction12)) => void | No | Whether to perform close event interception and interception callback. The default value is **true**.<br>1. If this parameter is set to **false**, the system does not respond to the close event initiated by touching the Back button, swiping left or right on the screen, or pressing the Esc key; and the system closes the popup only when **show** is set to **false**. If this parameter is set to **true**, the system responds to the close event normally.<br>2. If this parameter is set to a function, the close event is intercepted and the callback function is executed.<br>**NOTE**<br>No more **onWillDismiss** callback is allowed in an **onWillDismiss** callback.| 56 57## PopupMessageOptions<sup>10+</sup> 58 59**Atomic service API**: This API can be used in atomic services since API version 11. 60 61| Name | Type | Mandatory | Description | 62| --------- | ------------------------------------------ | ---- | ---------------------- | 63| textColor | [ResourceColor](ts-types.md#resourcecolor) | No | Text color of the popup message. | 64| font | [Font](ts-types.md#font) | No | Font attributes of the popup message. | 65 66## DismissPopupAction<sup>12+</sup> 67 68 69| Name | Type | Mandatory | Description | 70| ------- | ----------------------------------------- | ---- | --------------------------------------------------------------- | 71| dismiss | function | Yes | Callback for closing the popup. This API is called only when the popup needs to be exited. | 72| reason | [DismissReason](#dismissreason12) | Yes | Reason why the popup cannot be closed. | 73 74## DismissReason<sup>12+</sup> 75 76 77| Name | Description | 78| ------------- | ------------------ | 79| PRESS_BACK | Touching the Back button. | 80| TOUCH_OUTSIDE | Touching anywhere outside of the popup. | 81 82## CustomPopupOptions<sup>8+</sup> 83 84| Name | Type | Mandatory | Description | 85| ---------------------------- | ---------------------------------------- | ---- | ---------------------------------------- | 86| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Popup builder.<br>**NOTE**<br>The **popup** attribute is a universal attribute. A custom popup does not support display of another popup. The **position** attribute cannot be used for the first-layer container in the builder. If the **position** attribute is used, the popup will not be displayed. If a custom component is used in the builder, the **aboutToAppear** and **aboutToDisappear** lifecycle callbacks of the custom component are irrelevant to the visibility of the popup. As such, the lifecycle of the custom component cannot be used to determine whether the popup is displayed or not.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 87| placement | [Placement](ts-appendix-enums.md#placement8) | No | Preferred position of the popup. If the set position is insufficient for holding the popup, it will be automatically adjusted.<br>Default value: **Placement.Bottom**<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 88| popupColor | number \| [Color](ts-types.md#color) \| string \| [Resource](ts-types.md#resource) | No | Color of the popup. To remove the background blur, set **backgroundBlurStyle** to **BlurStyle.NONE**.<br>The default value varies by API version.<br>API version 10: **'#4d4d4d'**<br>API version 11 and later: [TRANSPARENT](ts-appendix-enums.md#color) plus [COMPONENT_ULTRA_THICK]. (ts-appendix-enums.md#blurstyle9)<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 89| enableArrow | boolean | No | Whether to display an arrow.<br>Since API version 9, if the position set for the popup is not large enough, the arrow will not be displayed. For example, if **placement** is set to **Left**, but the popup height (80 vp) is less than the sum of the arrow width (32 vp) and diameter of popup rounded corner (48 vp), the arrow will not be displayed.<br>Default value: **true**<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 90| autoCancel | boolean | No | Whether to automatically close the popup when an operation is performed on the page.<br>Default value: **true**<br>**NOTE**<br>To enable the popup to disappear upon a click on it, place a layout component in the builder, place the **\<Popup>** component in the layout component, and modify the value of the **bindPopup** variable (show: boolean) in the **onClick** event of the layout component.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 91| onStateChange | (event: { isVisible: boolean }) => void | No | Callback for the popup status change event. The parameter **isVisible** indicates whether the popup is visible.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 92| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | No | Offset of the popup arrow relative to the popup. When the arrow is at the top or bottom of the popup: The value **0** indicates that the arrow is located on the leftmost, and any other value indicates the distance from the arrow to the leftmost; the arrow is centered by default. When the arrow is on the left or right side of the popup: The value indicates the distance from the arrow to the top; the arrow is centered by default. When the popup is displayed on either edge of the screen, it will automatically deviate leftward or rightward to stay within the safe area. When the value is 0, the arrow always points to the bound component.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 93| showInSubWindow<sup>9+</sup> | boolean | No | Whether to show the popup in the subwindow. The default value is **false**.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 94| maskColor<sup>(deprecated)</sup> | [Resource](ts-types.md#resource) \| string \| number \| [Color](ts-types.md#color) | No | Color of the popup mask.<br>**NOTE**<br>This parameter is deprecated since API version 10. You are advised to use **mask** instead. | 95| mask<sup>10+</sup> | boolean \| { color : [ResourceColor](ts-types.md#resourcecolor) }| No | Whether to apply a mask to the popup. The value **true** means to apply a transparent mask to the popup, **false** means not to apply a mask to the popup, and a color value means to apply a mask in the corresponding color to the popup.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 96| targetSpace<sup>10+</sup> | [Length](ts-types.md#length) | No | Space between the popup and the target.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 97| offset<sup>10+</sup> | [Position](ts-types.md#position) | No | Offset of the popup relative to the display position specified by **placement**.<br>**NOTE**<br>This parameter cannot be set in percentage.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 98| width<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | No | Width of the popup.<br>**NOTE**<br>When **showInSubWindow** is set to **true**, the maximum height of the popup is the height of the device screen. When **showInSubWindow** is set to **false**, the maximum height is the height of the application window. Allowable height = Maximum height – Status bar height (0 if there is no status bar) – Dock height (0 if there is no dock) – 40 VP – 40 VP.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 99| arrowPointPosition<sup>11+</sup> | [ArrowPointPosition](ts-appendix-enums.md#arrowpointposition11) | No | Position of the popup arrow relative to its parent component. Available positions are **Start**, **Center**, and **End**, in both vertical and horizontal directions. All these positions are within the parent component area.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 100| arrowWidth<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | No | Arrow thickness. If the arrow thickness exceeds the length of the edge minus twice the size of the popup rounded corner, the arrow is not drawn.<br>Default value: **16.0_vp**<br>**NOTE**<br>This parameter cannot be set in percentage.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 101| arrowHeight<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | No | Arrow height.<br>Default value: **8.0_vp**<br>**NOTE**<br>This parameter cannot be set in percentage.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 102| radius<sup>11+</sup> | [Dimension](ts-types.md#dimension10) | No | Rounded corner radius of the popup.<br>Default value: **20.0_vp**<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 103| shadow<sup>11+</sup> | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10) | No | Popup shadow.<br>Default value: **ShadowStyle.OUTER_DEFAULT_MD**<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 104| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-appendix-enums.md#blurstyle9) | No | Background blur style of the popup.<br>Default value: **BlurStyle.COMPONENT_ULTRA_THICK**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 105| focusable<sup>11+</sup> | boolean | No | Whether the popup obtains focus when displayed.<br>Default value: **false**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 106| transition<sup>12+</sup> | [TransitionEffect](ts-transition-animation-component.md#transitioneffect10) | No | Transition effect for the entrance and exit of the popup.<br>**NOTE**<br>1. If this parameter is not set, the default effect is used.<br>2. Touching the Back button during the entrance animation pauses the entrance animation and starts the exit animation. The final effect is one obtained after the curves of the entrance and exit animations are combined.<br>3. Touching the Back button during the exit animation does not affect the animation playback. The Back button does not respond.| 107| onWillDismiss<sup>12+</sup> | boolean\|(dismissPopupAction: [DismissPopupAction](#dismisspopupaction12)) => void | No | Whether to perform close event interception and interception callback. The default value is **true**.<br>1. If this parameter is set to **false**, the system does not respond to the close event initiated by touching the Back button, swiping left or right on the screen, or pressing the Esc key; and the system closes the popup only when **show** is set to **false**. If this parameter is set to **true**, the system responds to the close event normally.<br>2. If this parameter is set to a function, the close event is intercepted and the callback function is executed.<br>**NOTE**<br>No more **onWillDismiss** callback is allowed in an **onWillDismiss** callback. | 108 109## Example 110 111### Example 1 112 113```ts 114// xxx.ets 115@Entry 116@Component 117struct PopupExample { 118 @State handlePopup: boolean = false 119 @State customPopup: boolean = false 120 121 // Popup builder 122 @Builder popupBuilder() { 123 Row({ space: 2 }) { 124 Image($r("app.media.icon")).width(24).height(24).margin({ left: -5 }) 125 Text('Custom Popup').fontSize(10) 126 }.width(100).height(50).padding(5) 127 } 128 129 build() { 130 Flex({ direction: FlexDirection.Column }) { 131 // PopupOptions for setting the popup 132 Button('PopupOptions') 133 .onClick(() => { 134 this.handlePopup = !this.handlePopup 135 }) 136 .bindPopup(this.handlePopup, { 137 message: 'This is a popup with PopupOptions', 138 placementOnTop: true, 139 showInSubWindow:false, 140 primaryButton: { 141 value: 'confirm', 142 action: () => { 143 this.handlePopup = !this.handlePopup 144 console.info('confirm Button click') 145 } 146 }, 147 // Secondary button 148 secondaryButton: { 149 value: 'cancel', 150 action: () => { 151 this.handlePopup = !this.handlePopup 152 console.info('cancel Button click') 153 } 154 }, 155 onStateChange: (e) => { 156 console.info(JSON.stringify(e.isVisible)) 157 if (!e.isVisible) { 158 this.handlePopup = false 159 } 160 } 161 }) 162 .position({ x: 100, y: 150 }) 163 164 165 // CustomPopupOptions for setting the popup 166 Button('CustomPopupOptions') 167 .onClick(() => { 168 this.customPopup = !this.customPopup 169 }) 170 .bindPopup(this.customPopup, { 171 builder: this.popupBuilder, 172 placement: Placement.Top, 173 mask: {color:'#33000000'}, 174 popupColor: Color.Yellow, 175 enableArrow: true, 176 showInSubWindow: false, 177 onStateChange: (e) => { 178 if (!e.isVisible) { 179 this.customPopup = false 180 } 181 } 182 }) 183 .position({ x: 80, y: 300 }) 184 }.width('100%').padding({ top: 5 }) 185 } 186} 187``` 188 189 190 191### Example 2 192 193```ts 194// xxx.ets 195 196@Entry 197@Component 198struct PopupExample { 199 @State handlePopup: boolean = false 200 @State customPopup: boolean = false 201 202 // Popup builder 203 @Builder popupBuilder() { 204 Row() { 205 Text('Custom Popup Message').fontSize(10) 206 }.height(50).padding(5) 207 } 208 209 build() { 210 Column({space: 100}) { 211 Button('PopupOptions') 212 .onClick(() => { 213 this.handlePopup = !this.handlePopup 214 }) 215 .bindPopup(this.handlePopup, { // PopupOptions for setting the popup 216 message: 'This is a popup with PopupOptions', 217 messageOptions: { // Text style of the popup 218 textColor: Color.Red, 219 font: { 220 size: '14vp', 221 style: FontStyle.Italic, 222 weight: FontWeight.Bolder 223 } 224 }, 225 placement: Placement.Bottom, 226 enableArrow: false, 227 targetSpace: '15vp', 228 onStateChange: (e) => { 229 console.info(JSON.stringify(e.isVisible)) 230 if (!e.isVisible) { 231 this.handlePopup = false 232 } 233 } 234 }) 235 Button('CustomPopupOptions') 236 .onClick(() => { 237 this.customPopup = !this.customPopup 238 }) 239 .bindPopup(this.customPopup, { // Popup with CustomPopupOptions settings 240 builder: this.popupBuilder, 241 targetSpace: '15vp', 242 enableArrow: false, // Set the arrow not to display. 243 onStateChange: (e) => { 244 if (!e.isVisible) { 245 this.customPopup = false 246 } 247 } 248 }) 249 }.margin(20) 250 } 251} 252``` 253 254 255 256### Example 3 257 258```ts 259// xxx.ets 260 261@Entry 262@Component 263struct PopupExample { 264 @State customPopup: boolean = false 265 @State handlePopup: boolean = false 266 267 build() { 268 Column({ space: 100 }) { 269 Button("popup") 270 .margin({ top: 50 }) 271 .onClick(() => { 272 this.customPopup = !this.customPopup 273 }) 274 .bindPopup(this.customPopup, { 275 message: "this is a popup", 276 arrowHeight: 20, // Set the height for the popup arrow. 277 arrowWidth: 20, // Set the width for the popup arrow. 278 radius: 20, // Set the corner radius of the popup. 279 shadow: ShadowStyle.OUTER_DEFAULT_XS, // Set the shadow for the popup. 280 }) 281 282 Button('PopupOptions') 283 .onClick(() => { 284 this.handlePopup = !this.handlePopup 285 }) 286 .bindPopup(this.handlePopup, { 287 width: 300, 288 message: 'This is a popup with PopupOptions', 289 arrowPointPosition: ArrowPointPosition.START, // Set the position for the popup arrow. 290 backgroundBlurStyle: BlurStyle.NONE, // Disable the background blur for the popup. 291 popupColor: Color.Red, // Set the background color for the popup. 292 autoCancel: true, 293 }) 294 } 295 .width('100%') 296 } 297} 298``` 299 300 301 302### Example 4 303 304This example customizes the popup appearance and exit animation through **transition**. 305 306```ts 307// xxx.ets 308@Entry 309@Component 310struct PopupExample { 311 @State handlePopup: boolean = false 312 @State customPopup: boolean = false 313 314 // Popup builder 315 @Builder popupBuilder() { 316 Row() { 317 Text('Custom Popup with transitionEffect').fontSize(10) 318 }.height(50).padding(5) 319 } 320 321 build() { 322 Flex({ direction: FlexDirection.Column }) { 323 // PopupOptions for setting the popup 324 Button('PopupOptions') 325 .onClick(() => { 326 this.handlePopup = !this.handlePopup 327 }) 328 .bindPopup(this.handlePopup, { 329 message: 'This is a popup with transitionEffect', 330 placementOnTop: true, 331 showInSubWindow: false, 332 onStateChange: (e) => { 333 console.info(JSON.stringify(e.isVisible)) 334 if (!e.isVisible) { 335 this.handlePopup = false 336 } 337 }, 338 // Set the popup animation to a combination of opacity and translation effects, with no exit animation. 339 transition:TransitionEffect.asymmetric( 340 TransitionEffect.OPACITY.animation({ duration: 1000, curve: Curve.Ease }).combine( 341 TransitionEffect.translate({ x: 50, y: 50 })), 342 TransitionEffect.IDENTITY) 343 }) 344 .position({ x: 100, y: 150 }) 345 346 // CustomPopupOptions for setting the popup 347 Button('CustomPopupOptions') 348 .onClick(() => { 349 this.customPopup = !this.customPopup 350 }) 351 .bindPopup(this.customPopup, { 352 builder: this.popupBuilder, 353 placement: Placement.Top, 354 showInSubWindow: false, 355 onStateChange: (e) => { 356 if (!e.isVisible) { 357 this.customPopup = false 358 } 359 }, 360 // Set the popup entrance and exit animations to be a scaling effect. 361 transition:TransitionEffect.scale({ x: 1, y: 0 }).animation({ duration: 500, curve: Curve.Ease }) 362 }) 363 .position({ x: 80, y: 300 }) 364 }.width('100%').padding({ top: 5 }) 365 } 366} 367``` 368 369 370 371### Example 5 372 373```ts 374// xxx.ets 375// This example implements intercepting the close event and executing a callback function by setting the onWillDismiss property of bindPopup to a callback function. 376@Entry 377@Component 378struct PopupExample { 379 @State handlePopup: boolean = false 380 build() { 381 Column() { 382 Button('PopupOptions') 383 .onClick(() => { 384 this.handlePopup = true 385 }) 386 .bindPopup(this.handlePopup, { 387 message: 'This is a popup with PopupOptions', 388 messageOptions: { 389 textColor: Color.Red, 390 font: { 391 size: '14vp', 392 style: FontStyle.Italic, 393 weight: FontWeight.Bolder 394 } 395 }, 396 placement: Placement.Bottom, 397 enableArrow: false, 398 targetSpace: '15vp', 399 onStateChange: (e) => { 400 if (!e.isVisible) { 401 this.handlePopup = false 402 } 403 }, 404 onWillDismiss: ( 405 (dismissPopupAction: DismissPopupAction) => { 406 console.info("dismissReason:" + JSON.stringify(dismissPopupAction.reason)) 407 if (dismissPopupAction.reason == DismissReason.PRESS_BACK) { 408 dismissPopupAction.dismiss() 409 } 410 } 411 ) 412 }) 413 }.margin(20) 414 } 415} 416``` 417 418 419 420### Example 6 421 422```ts 423// xxx.ets 424// This example demonstrates intercepting the close event by setting the onWillDismiss property of bindPopup to false. 425@Entry 426@Component 427struct PopupExample { 428 @State handlePopup: boolean = false 429 build() { 430 Column() { 431 Button('PopupOptions') 432 .onClick(() => { 433 this.handlePopup = true 434 }) 435 .bindPopup(this.handlePopup, { 436 message: 'This is a popup with PopupOptions', 437 messageOptions: { 438 textColor: Color.Red, 439 font: { 440 size: '14vp', 441 style: FontStyle.Italic, 442 weight: FontWeight.Bolder 443 } 444 }, 445 placement: Placement.Bottom, 446 enableArrow: false, 447 targetSpace: '15vp', 448 onStateChange: (e) => { 449 let timer = setTimeout(()=>{this.handlePopup = false},6000) 450 if (!e.isVisible) { 451 this.handlePopup = false 452 clearTimeout(timer) 453 } 454 }, 455 onWillDismiss: false 456 }) 457 }.margin(20) 458 } 459} 460``` 461 462 463
