Popup Control
You can bind a popup to a component, specifying its content, interaction logic, and visibility.
NOTE
This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
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.
bindPopup
bindPopup(show: boolean, popup: PopupOptions|CustomPopupOptions)
Binds a popup to the component.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| show | boolean | Yes | Whether to show the popup. The default value is false, indicating that the popup is hidden. The popup can be displayed only after the entire page is fully constructed. Therefore, to avoid incorrect display positions and shapes, do not set this parameter to true while the page is still being constructed. Since API version 13, this parameter supports two-way binding through the !! syntax. |
| popup | PopupOptions |CustomPopupOptions8+ | Yes | Parameters of the popup. |
PopupOptions
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory | Description |
|---|---|---|---|
| message | string | Yes | Content of the popup message. Atomic service API: This API can be used in atomic services since API version 11. |
| placementOnTop(deprecated) | boolean | No | Whether to display the popup above the component. The default value is false. NOTE This API is deprecated since API version 10. You are advised to use placement instead. |
| primaryButton | { value: string, action: () => void } | No | Primary button. value: text of the primary button in the popup. action: callback for clicking the primary button. Atomic service API: This API can be used in atomic services since API version 11. |
| secondaryButton | { value: string, action: () => void } | No | Secondary button. value: text of the secondary button in the popup. action: callback for clicking the secondary button. Atomic service API: This API can be used in atomic services since API version 11. |
| onStateChange | (event: { isVisible: boolean }) => void | No | Callback for the popup status change event. The parameter isVisible indicates whether the popup is visible. Atomic service API: This API can be used in atomic services since API version 11. |
| arrowOffset9+ | 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. Atomic service API: This API can be used in atomic services since API version 11. |
| showInSubWindow9+ | boolean | No | Whether to show the popup in the subwindow. The value true means to show the popup in the subwindow, and false means to show the popup in the main window. Default value: false Atomic service API: This API can be used in atomic services since API version 11. |
| mask10+ | boolean |{ color : 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. Atomic service API: This API can be used in atomic services since API version 11. |
| messageOptions10+ | PopupMessageOptions | No | Parameters of the popup message. Atomic service API: This API can be used in atomic services since API version 11. |
| targetSpace10+ | Length | No | Space between the popup and the target. Atomic service API: This API can be used in atomic services since API version 11. |
| placement10+ | Placement | No | Position of the popup relative to the target. The default value is Placement.Bottom. If both placementOnTop and placement are set, the latter prevails. Atomic service API: This API can be used in atomic services since API version 11. |
| offset10+ | Position | No | Offset of the popup relative to the display position specified by placement. NOTE This parameter cannot be set in percentage. Atomic service API: This API can be used in atomic services since API version 11. |
| enableArrow10+ | boolean | No | Whether to display the arrow. Default value: true NOTE If the available space on the screen is insufficient, the popup will cover part of the component and the arrow will not be displayed. Atomic service API: This API can be used in atomic services since API version 11. |
| popupColor11+ | Color |string |number | Resource | No | Color of the popup. To remove the background blur, set backgroundBlurStyle to BlurStyle.NONE. Default value: TRANSPARENT plusCOMPONENT_ULTRA_THICK Atomic service API: This API can be used in atomic services since API version 12. |
| autoCancel11+ | boolean | No | Whether to automatically dismiss the popup when an operation is performed on the page. Default value: true Atomic service API: This API can be used in atomic services since API version 12. |
| width11+ | Dimension | No | Width of the popup. Atomic service API: This API can be used in atomic services since API version 12. |
| arrowPointPosition11+ | ArrowPointPosition | 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. Atomic service API: This API can be used in atomic services since API version 12. |
| arrowWidth11+ | Dimension | 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. Default value: 16 Unit: vp NOTE This parameter cannot be set in percentage. Atomic service API: This API can be used in atomic services since API version 12. |
| arrowHeight11+ | Dimension | No | Arrow height. Default value: 8 Unit: vp NOTE This parameter cannot be set in percentage. Atomic service API: This API can be used in atomic services since API version 12. |
| radius11+ | Dimension | No | Rounded corner radius of the popup. Default value: 20 Unit: vp Atomic service API: This API can be used in atomic services since API version 12. |
| shadow11+ | ShadowOptions |ShadowStyle | No | Popup shadow. Default value: ShadowStyle.OUTER_DEFAULT_MD Atomic service API: This API can be used in atomic services since API version 12. |
| backgroundBlurStyle11+ | BlurStyle | No | Background blur style of the popup. Default value: BlurStyle.COMPONENT_ULTRA_THICK Atomic service API: This API can be used in atomic services since API version 12. |
| transition12+ | TransitionEffect | No | Transition effect for the entrance and exit of the popup. NOTE 1. If this parameter is not set, the default effect is used. 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. 3. Touching the Back button during the exit animation does not affect the animation playback. The Back button does not respond. Atomic service API: This API can be used in atomic services since API version 12. |
| onWillDismiss12+ | boolean |Callback<(DismissPopupAction)> | No | Whether to perform dismissal event interception and interception callback. The default value is true. 1. If this parameter is set to false, the system does not respond to the dismissal event initiated by touching the Back button, swiping left or right on the screen, or pressing the Esc key; and the system dismisses the popup only when show is set to false. If this parameter is set to true, the system responds to the dismissal event as expected. 2. If this parameter is set to a function, the dismissal event is intercepted and the callback function is executed. NOTE No more onWillDismiss callback is allowed in an onWillDismiss callback. Atomic service API: This API can be used in atomic services since API version 12. |
| followTransformOfTarget13+ | boolean | No | Whether the popup adjusts its position to follow transformations (like rotation or scaling) applied to its host component or the host component's parent container. Default value: false Atomic service API: This API can be used in atomic services since API version 13. |
| keyboardAvoidMode15+ | KeyboardAvoidMode | No | Whether to avoid the soft keyboard. By default, the popup does not avoid the soft keyboard. When configured to avoid the soft keyboard, if the popup display space is insufficient, the display mode of the popup changes from being centered over the parent component to being translated and covering the parent component.. In addition, if the popup arrow does not point to the host, the arrow will not be displayed. Default value: KeyboardAvoidMode.NONE Atomic service API: This API can be used in atomic services since API version 15. |
| enableHoverMode18+ | boolean | No | Whether to enable the hover mode. If the click position of the popup component is in the crease area in the hover state, the popup component does not respond to the hover state. Default value: false, indicating that the popup does not respond in hover mode NOTE The menu responds in hover mode when enableHoverMode is set to true and does not when enableHoverMode is set to false or an invalid value or is not set at all. Atomic service API: This API can be used in atomic services since API version 18. |
PopupMessageOptions10+
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory | Description |
|---|---|---|---|
| textColor | ResourceColor | No | Text color of the popup message. |
| font | Font | No | Font settings of the popup message. NOTE Setting family is not supported. |
DismissPopupAction12+
Atomic service API: This API can be used in atomic services since API version 12.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory | Description |
|---|---|---|---|
| dismiss | function | Yes | Callback for dismissing the popup. This API is called only when the popup needs to be exited. |
| reason | DismissReason | Yes | Reason why the popup cannot be dismissed. |
DismissReason12+
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Description |
|---|---|
| PRESS_BACK | Touching the Back button. |
| TOUCH_OUTSIDE | Touching anywhere outside of the popup. |
CustomPopupOptions8+
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory | Description |
|---|---|---|---|
| builder | CustomBuilder | Yes | Popup builder. NOTE 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. Atomic service API: This API can be used in atomic services since API version 11. |
| placement | Placement | No | Preferred position of the popup. If the set position is insufficient for holding the popup, it will be automatically adjusted. Default value: Placement.Bottom Atomic service API: This API can be used in atomic services since API version 11. |
| popupColor | number |Color |string |Resource | No | Color of the popup. To remove the background blur, set backgroundBlurStyle to BlurStyle.NONE. The default value varies by API version. API version 10: '#4d4d4d' API version 11 and later: TRANSPARENT plus COMPONENT_ULTRA_THICK Atomic service API: This API can be used in atomic services since API version 11. |
| enableArrow | boolean | No | Whether to display an arrow. 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. Default value: true Atomic service API: This API can be used in atomic services since API version 11. |
| autoCancel | boolean | No | Whether to automatically dismiss the popup when an operation is performed on the page. Default value: true NOTE 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. Atomic service API: This API can be used in atomic services since API version 11. |
| onStateChange | (event: { isVisible: boolean }) => void | No | Callback for the popup status change event. The parameter isVisible indicates whether the popup is visible. Atomic service API: This API can be used in atomic services since API version 11. |
| arrowOffset9+ | 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. Atomic service API: This API can be used in atomic services since API version 11. |
| showInSubWindow9+ | boolean | No | Whether to show the popup in the subwindow. The value true means to show the popup in the subwindow, and false means to show the popup in the main window. Default value: false Atomic service API: This API can be used in atomic services since API version 11. |
| maskColor(deprecated) | Resource |string |number | Color | No | Color of the popup mask. NOTE This parameter is deprecated since API version 10. You are advised to use mask instead. |
| mask10+ | boolean |{ color : 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. Atomic service API: This API can be used in atomic services since API version 11. |
| targetSpace10+ | Length | No | Space between the popup and the target. Atomic service API: This API can be used in atomic services since API version 11. |
| offset10+ | Position | No | Offset of the popup relative to the display position specified by placement. NOTE This parameter cannot be set in percentage. Atomic service API: This API can be used in atomic services since API version 11. |
| width11+ | Dimension | No | Width of the popup. Atomic service API: This API can be used in atomic services since API version 12. |
| arrowPointPosition11+ | ArrowPointPosition | 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. Atomic service API: This API can be used in atomic services since API version 12. |
| arrowWidth11+ | Dimension | 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. Default value: 16 Unit: vp NOTE This parameter cannot be set in percentage. Atomic service API: This API can be used in atomic services since API version 12. |
| arrowHeight11+ | Dimension | No | Arrow height. Default value: 8 Unit: vp NOTE This parameter cannot be set in percentage. Atomic service API: This API can be used in atomic services since API version 12. |
| radius11+ | Dimension | No | Rounded corner radius of the popup. Default value: 20 Unit: vp Atomic service API: This API can be used in atomic services since API version 12. |
| shadow11+ | ShadowOptions |ShadowStyle | No | Popup shadow. Default value: ShadowStyle.OUTER_DEFAULT_MD Atomic service API: This API can be used in atomic services since API version 12. |
| backgroundBlurStyle11+ | BlurStyle | No | Background blur style of the popup. Default value: BlurStyle.COMPONENT_ULTRA_THICK Atomic service API: This API can be used in atomic services since API version 12. |
| focusable11+ | boolean | No | Whether the popup obtains focus when displayed. Default value: false Atomic service API: This API can be used in atomic services since API version 12. |
| transition12+ | TransitionEffect | No | Transition effect for the entrance and exit of the popup. NOTE 1. If this parameter is not set, the default effect is used. 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. 3. Touching the Back button during the exit animation does not affect the animation playback. The Back button does not respond. Atomic service API: This API can be used in atomic services since API version 12. |
| onWillDismiss12+ | boolean |Callback<(DismissPopupAction)> | No | Whether to perform dismissal event interception and interception callback. The default value is true. 1. If this parameter is set to false, the system does not respond to the dismissal event initiated by touching the Back button, swiping left or right on the screen, or pressing the Esc key; and the system dismisses the popup only when show is set to false. If this parameter is set to true, the system responds to the dismissal event as expected. 2. If this parameter is set to a function, the dismissal event is intercepted and the callback function is executed. NOTE No more onWillDismiss callback is allowed in an onWillDismiss callback. Atomic service API: This API can be used in atomic services since API version 12. |
| followTransformOfTarget13+ | boolean | No | Whether the popup adjusts its position to follow transformations (like rotation or scaling) applied to its host component or the host component's parent container. Default value: false Atomic service API: This API can be used in atomic services since API version 13. |
| keyboardAvoidMode15+ | KeyboardAvoidMode | No | Whether to avoid the soft keyboard. By default, the popup does not avoid the soft keyboard. When configured to avoid the soft keyboard, if the popup display space is insufficient, the display mode of the popup changes from being centered over the parent component to being translated and covering the parent component.. In addition, if the popup arrow does not point to the host, the arrow will not be displayed. Default value: KeyboardAvoidMode.NONE Atomic service API: This API can be used in atomic services since API version 15. |
| enableHoverMode18+ | boolean | No | Whether to enable the hover mode. If the click position of the popup component is in the crease area in the hover state, the popup component does not respond to the hover state. Default value: false, indicating that the popup does not respond in hover mode NOTE The popup responds in hover mode when enableHoverMode is set to true and does not when enableHoverMode is set to false or an invalid value or is not set at all. Atomic service API: This API can be used in atomic services since API version 18. |
PopupCommonOptions18+
Parameters of the popup. Use the getPromptAction() API in UIContext to obtain a PromptAction object. Then, use this object to call openPopup and updatePopup, where the properties of the options parameter are defined as follows.
Atomic service API: This API can be used in atomic services since API version 18.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory | Description |
|---|---|---|---|
| placement | Placement | No | Preferred position of the popup. If the set position is insufficient for holding the popup, it will be automatically adjusted. Default value: Placement.Bottom |
| popupColor | ResourceColor | No | Color of the popup. To remove the background blur, set backgroundBlurStyle to BlurStyle.NONE. Default value: TRANSPARENT plusCOMPONENT_ULTRA_THICK |
| enableArrow | boolean | No | Whether to display an arrow. 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. Default value: true |
| autoCancel | boolean | No | Whether to automatically dismiss the popup when an operation is performed on the page. Default value: true |
| onStateChange | PopupStateChangeCallback | No | Callback invoked when the popup state changes. NOTE The settings cannot be updated through updatePopup. |
| arrowOffset | 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. |
| showInSubWindow | boolean | No | Whether to show the popup in the subwindow. The value true means to show the popup in the subwindow, and false means to show the popup in the main window. Default value: false NOTE The settings cannot be updated through updatePopup. |
| mask | boolean |PopupMaskType | 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 value of the PopupMaskType type means to apply a mask in the specified color to the popup. |
| targetSpace | Length | No | Space between the popup and the target. |
| offset | Position | No | Offset of the popup relative to the display position specified by placement. NOTE This parameter cannot be set in percentage. |
| width | Dimension | No | Width of the popup. |
| arrowPointPosition | ArrowPointPosition | 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. |
| arrowWidth | Dimension | 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. Default value: 16 Unit: vp NOTE This parameter cannot be set in percentage. |
| arrowHeight | Dimension | No | Arrow height. Default value: 8 Unit: vp NOTE This parameter cannot be set in percentage. |
| radius | Dimension | No | Rounded corner radius of the popup. Default value: 20 Unit: vp |
| shadow | ShadowOptions |ShadowStyle | No | Popup shadow. Default value: ShadowStyle.OUTER_DEFAULT_MD |
| backgroundBlurStyle | BlurStyle | No | Background blur style of the popup. Default value: BlurStyle.COMPONENT_ULTRA_THICK |
| focusable | boolean | No | Whether the popup obtains focus when displayed. Default value: false NOTE The settings cannot be updated through updatePopup. |
| transition | TransitionEffect | No | Transition effect for the entrance and exit of the popup. NOTE 1. If this parameter is not set, the default effect is used. 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. 3. Touching the Back button during the exit animation does not affect the animation playback. The Back button does not respond. 4. The settings cannot be updated through updatePopup. |
| onWillDismiss | boolean|Callback<DismissPopupAction> | No | Whether to perform dismissal event interception and interception callback. The default value is true. 1. If this parameter is set to false, the system does not respond to the dismissal event initiated by touching the Back button, swiping left or right on the screen, or pressing the Esc key; and the system dismisses the popup only when show is set to false. If this parameter is set to true, the system responds to the dismissal event as expected. 2. If this parameter is set to a function, the dismissal event is intercepted and the callback function is executed. NOTE 1. Nesting onWillDismiss callbacks is not allowed. 2. The settings cannot be updated through updatePopup. |
| followTransformOfTarget | boolean | No | Whether the popup adjusts its position to follow transformations (like rotation or scaling) applied to its host component or the host component's parent container. Default value: false |
| enableHoverMode | boolean | No | Whether to enable the hover mode. If the click position of the popup component is in the crease area in the hover state, the popup component does not respond to the hover state. Default value: false, indicating that the popup does not respond in hover mode NOTE The popup responds in hover mode when enableHoverMode is set to true and does not when enableHoverMode is set to false or an invalid value or is not set at all. |
PopupStateChangeParam18+
Describes the display state of a popup.
Atomic service API: This API can be used in atomic services since API version 18.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory | Description |
|---|---|---|---|
| isVisible | boolean | Yes | Display state of the popup. |
PopupStateChangeCallback18+
Represents the callback invoked when the popup state changes.
type PopupStateChangeCallback = (event: PopupStateChangeParam) => void;
Atomic service API: This API can be used in atomic services since API version 18.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| event | PopupStateChangeParam | Yes | Display state of the popup. |
PopupMaskType18+
Describes the color of the mask.
Atomic service API: This API can be used in atomic services since API version 18.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory | Description |
|---|---|---|---|
| color | ResourceColor | Yes | Color of the mask. |
Example
Example 1: Displaying Different Types of Popups
This example showcases how to use the bindPopup API to configure and display popups of PopupOptions and CustomPopupOptions types.
// xxx.ets
@Entry
@Component
struct PopupExample {
@State handlePopup: boolean = false;
@State customPopup: boolean = false;
// Popup builder
@Builder popupBuilder() {
Row({ space: 2 }) {
Image($r("app.media.icon")).width(24).height(24).margin({ left: -5 })
Text('Custom Popup').fontSize(10)
}.width(100).height(50).padding(5)
}
build() {
Flex({ direction: FlexDirection.Column }) {
// PopupOptions for setting the popup
Button('PopupOptions')
.onClick(() => {
this.handlePopup = !this.handlePopup;
})
.bindPopup(this.handlePopup, {
message: 'This is a popup with PopupOptions',
placementOnTop: true,
showInSubWindow:false,
// Set the popup to avoid the soft keyboard.
keyboardAvoidMode: KeyboardAvoidMode.DEFAULT,
primaryButton: {
value: 'confirm',
action: () => {
this.handlePopup = !this.handlePopup;
console.info('confirm Button click');
}
},
// Secondary button
secondaryButton: {
value: 'cancel',
action: () => {
this.handlePopup = !this.handlePopup;
console.info('cancel Button click');
}
},
onStateChange: (e) => {
console.info(JSON.stringify(e.isVisible))
if (!e.isVisible) {
this.handlePopup = false;
}
}
})
.position({ x: 100, y: 150 })
// CustomPopupOptions for setting the popup
Button('CustomPopupOptions')
.onClick(() => {
this.customPopup = !this.customPopup;
})
.bindPopup(this.customPopup, {
builder: this.popupBuilder,
placement: Placement.Top,
mask: {color:'#33000000'},
popupColor: Color.Yellow,
enableArrow: true,
// Set the popup to avoid the soft keyboard.
keyboardAvoidMode: KeyboardAvoidMode.DEFAULT,
showInSubWindow: false,
onStateChange: (e) => {
if (!e.isVisible) {
this.customPopup = false;
}
}
})
.position({ x: 80, y: 300 })
}.width('100%').padding({ top: 5 })
}
}
Example 2: Setting the Popup Text Style
This example shows how to use the bindPopup API to display a popup with custom messageOptions settings.
// xxx.ets
@Entry
@Component
struct PopupExample {
@State handlePopup: boolean = false;
build() {
Column({ space: 100 }) {
Button('PopupOptions').margin(100)
.onClick(() => {
this.handlePopup = !this.handlePopup;
})
.bindPopup(this.handlePopup, {
// Popup of the PopupOptions type
message: 'This is a popup with PopupOptions',
messageOptions: {
// Text style of the popup
textColor: Color.Red,
font: {
size: '14vp',
style: FontStyle.Italic,
weight: FontWeight.Bolder
}
},
placement: Placement.Bottom,
enableArrow: false, // Set the arrow not to display.
targetSpace: '15vp',
onStateChange: (e) => {
console.info(JSON.stringify(e.isVisible));
if (!e.isVisible) {
this.handlePopup = false;
}
}
})
}.margin(20)
}
}
Example 3: Setting the Popup Style
This example demonstrates how to use the bindPopup API with properties like arrowHeight, arrowWidth, radius, shadow, and popupColor to set the styles for both the popup's arrow and the popup itself.
// xxx.ets
@Entry
@Component
struct PopupExample {
@State customPopup: boolean = false;
@State handlePopup: boolean = false;
build() {
Column({ space: 100 }) {
Button("popup")
.margin({ top: 50 })
.onClick(() => {
this.customPopup = !this.customPopup;
})
.bindPopup(this.customPopup, {
message: "this is a popup",
arrowHeight: 20, // Set the height for the popup arrow.
arrowWidth: 20, // Set the width for the popup arrow.
radius: 20, // Set the corner radius of the popup.
shadow: ShadowStyle.OUTER_DEFAULT_XS, // Set the shadow for the popup.
})
Button('PopupOptions')
.onClick(() => {
this.handlePopup = !this.handlePopup;
})
.bindPopup(this.handlePopup, {
width: 300,
message: 'This is a popup with PopupOptions',
arrowPointPosition: ArrowPointPosition.START, // Set the position for the popup arrow.
backgroundBlurStyle: BlurStyle.NONE, // Disable the background blur for the popup.
popupColor: Color.Red, // Set the background color for the popup.
autoCancel: true,
})
}
.width('100%')
}
}
Example 4: Setting the Popup Animation
In this example, the bindPopup API is used with the transition property to implement animations for displaying and dismissing popups.
// xxx.ets
@Entry
@Component
struct PopupExample {
@State handlePopup: boolean = false;
@State customPopup: boolean = false;
// Popup builder
@Builder popupBuilder() {
Row() {
Text('Custom Popup with transitionEffect').fontSize(10)
}.height(50).padding(5)
}
build() {
Flex({ direction: FlexDirection.Column }) {
// PopupOptions for setting the popup
Button('PopupOptions')
.onClick(() => {
this.handlePopup = !this.handlePopup;
})
.bindPopup(this.handlePopup, {
message: 'This is a popup with transitionEffect',
placementOnTop: true,
showInSubWindow: false,
onStateChange: (e) => {
console.info(JSON.stringify(e.isVisible))
if (!e.isVisible) {
this.handlePopup = false;
}
},
// Set the popup animation to a combination of opacity and translation effects, with no exit animation.
transition:TransitionEffect.asymmetric(
TransitionEffect.OPACITY.animation({ duration: 1000, curve: Curve.Ease }).combine(
TransitionEffect.translate({ x: 50, y: 50 })),
TransitionEffect.IDENTITY)
})
.position({ x: 100, y: 150 })
// CustomPopupOptions for setting the popup
Button('CustomPopupOptions')
.onClick(() => {
this.customPopup = !this.customPopup;
})
.bindPopup(this.customPopup, {
builder: this.popupBuilder,
placement: Placement.Top,
showInSubWindow: false,
onStateChange: (e) => {
if (!e.isVisible) {
this.customPopup = false;
}
},
// Set the popup entrance and exit animations to be a scaling effect.
transition:TransitionEffect.scale({ x: 1, y: 0 }).animation({ duration: 500, curve: Curve.Ease })
})
.position({ x: 80, y: 300 })
}.width('100%').padding({ top: 5 })
}
}
Example 5: Adding an Event to a Popup
This example uses the bindPopup API with the onWillDismiss property to intercept the dismissal event when a popup is about to be dismissed and execute a callback function.
// xxx.ets
@Entry
@Component
struct PopupExample {
@State handlePopup: boolean = false;
build() {
Column() {
Button('PopupOptions')
.onClick(() => {
this.handlePopup = true;
})
.bindPopup(this.handlePopup, {
message: 'This is a popup with PopupOptions',
messageOptions: {
textColor: Color.Red,
font: {
size: '14vp',
style: FontStyle.Italic,
weight: FontWeight.Bolder
}
},
placement: Placement.Bottom,
enableArrow: false,
targetSpace: '15vp',
onStateChange: (e) => {
if (!e.isVisible) {
this.handlePopup = false;
}
},
onWillDismiss: (
(dismissPopupAction: DismissPopupAction) => {
console.info("dismissReason:" + JSON.stringify(dismissPopupAction.reason));
if (dismissPopupAction.reason === DismissReason.PRESS_BACK) {
dismissPopupAction.dismiss();
}
}
)
})
}.margin(20)
}
}
Example 6: Intercepting the Popup Dismissal Event
In this example, the onWillDismiss property is set to false to intercept the dismissal event of the popup.
// xxx.ets
@Entry
@Component
struct PopupExample {
@State handlePopup: boolean = false;
build() {
Column() {
Button('PopupOptions')
.onClick(() => {
this.handlePopup = true;
})
.bindPopup(this.handlePopup, {
message: 'This is a popup with PopupOptions',
messageOptions: {
textColor: Color.Red,
font: {
size: '14vp',
style: FontStyle.Italic,
weight: FontWeight.Bolder
}
},
placement: Placement.Bottom,
enableArrow: false,
targetSpace: '15vp',
followTransformOfTarget: true,
onStateChange: (e) => {
let timer = setTimeout(() => {
this.handlePopup = false;
}, 6000);
if (!e.isVisible) {
this.handlePopup = false;
clearTimeout(timer);
}
},
onWillDismiss: false
})
}.margin(20)
}
}
