1# Alert Dialog Box (AlertDialog) 2 3You can set the text content and response callback for an alert dialog box. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](../js-apis-arkui-UIContext.md#uicontext). 10> 11> Since API version 10, you can use the [showAlertDialog](../js-apis-arkui-UIContext.md#showalertdialog) API in [UIContext](../js-apis-arkui-UIContext.md#uicontext), which ensures that the alert dialog box is shown in the intended UI instance. 12 13## AlertDialog 14 15### show 16 17static show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions) 18 19Shows an alert dialog box. 20 21**Atomic service API**: This API can be used in atomic services since API version 11. 22 23**System capability**: SystemCapability.ArkUI.ArkUI.Full 24 25**Parameters** 26 27| Name | Type | Mandatory| Description| 28| ---- | --------------- | -------- | -------- | 29| value | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm) \| [AlertDialogParamWithButtons](#alertdialogparamwithbuttons) \| [AlertDialogParamWithOptions](#alertdialogparamwithoptions10)<sup>10+</sup> | Yes| Options of the alert dialog box.| 30 31## AlertDialogParam 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35| Name | Type | Mandatory| Description | 36| --------------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 37| title | [ResourceStr](ts-types.md#resourcestr) | No | Title of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 38| subtitle<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Subtitle of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 39| message | [ResourceStr](ts-types.md#resourcestr) | Yes | Content of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 40| autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked. The value **true** means to close the dialog box when the overlay is clicked, and **false** means the opposite.<br>Default value: **true**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 41| cancel | [VoidCallback](ts-types.md#voidcallback12) | No | Callback invoked when the dialog box is closed after the overlay is clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 42| alignment | [DialogAlignment](#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**<br>**Atomic service API**: This API can be used in atomic services since API version 11.<br>**NOTE**<br>If **showInSubWindow** is set to **true** in **UIExtension**, the dialog box is aligned with the host window based on **UIExtension**.| 43| offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.<br>Default value: **{ dx: 0 , dy: 0 }**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 44| gridCount | number | No | Number of grid columns occupied by the width of the dialog box.<br>Default value: **4**<br>Value range: an integer no less than 0<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 45| maskRect<sup>10+</sup> | [Rectangle](#rectangle8) | No | Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.<br>Default value: **{ x: 0, y: 0, width: '100%', height: '100%' }**<br>**NOTE**<br>**maskRect** does not take effect when **showInSubWindow** is set to **true**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 46| showInSubWindow<sup>11+</sup> | boolean | No | Whether to show the dialog box in a subwindow when the dialog box needs to be displayed outside the main window.<br>Default value: **false**<br>**NOTE**<br>A dialog box whose **showInSubWindow** attribute is **true** cannot trigger the display of another dialog box whose **showInSubWindow** attribute is also **true**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 47| isModal<sup>11+</sup> | boolean | No | Whether the dialog box is a modal. A modal dialog box has a mask applied, while a non-modal dialog box does not.<br>Default value: **true**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 48| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the dialog box.<br>Default value: **Color.Transparent**<br>**NOTE**<br>When **backgroundColor** is set to a non-transparent color, **backgroundBlurStyle** must be set to **BlurStyle.NONE**; otherwise, the color display may not meet the expected effect.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 49| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | No | Background blur style of the dialog box.<br>Default value: **BlurStyle.COMPONENT_ULTRA_THICK**<br>**NOTE**<br>Setting this parameter to **BlurStyle.NONE** disables the background blur. When **backgroundBlurStyle** is set to a value other than **NONE**, do not set **backgroundColor**. If you do, the color display may not produce the expected visual effect.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 50| onWillDismiss<sup>12+</sup> | Callback<[DismissDialogAction](#dismissdialogaction12)> | No | Callback for interactive closure of the dialog box.<br>**NOTE**<br>1. If this callback is registered, the dialog box will not be closed immediately after the user touches the mask or the Back button, presses the Esc key, or swipes left or right on the screen. The **reason** parameter in the callback is used to determine whether the dialog box can be closed. The reason returned by the component does not support the value **CLOSE_BUTTON**.<br>2. In the **onWillDismiss** callback, another **onWillDismiss** callback is not allowed.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 51| cornerRadius<sup>12+</sup> | [Dimension](ts-types.md#dimension10) \| [BorderRadiuses](ts-types.md#borderradiuses9) \| [LocalizedBorderRadiuses](ts-types.md#localizedborderradiuses12) | No | Radius of the rounded corners of the background.<br>You can set separate radiuses for the four rounded corners.<br>Default value: **{ topLeft: '32vp', topRight: '32vp', bottomLeft: '32vp', bottomRight: '32vp' }**<br> The radius of the rounded corners is subject to the component size. Its maximum value is half of the component width or height. If the value is negative, the default value is used.<br> When set to a percentage, the value defines the radius as a percentage of the parent component's width or height.<br>**NOTE**<br>When **cornerRadius** is of type LocalizedBorderRadiuses, the layout order can be dynamically adjusted based on the user's language settings.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 52| transition<sup>12+</sup> | [TransitionEffect](ts-transition-animation-component.md#transitioneffect10) | No | Transition effect for the entrance and exit of the dialog box.<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. Touching the Back button again closes the application.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 53| width<sup>12+</sup> | [Dimension](ts-types.md#dimension10) | No | Width of the dialog box.<br>**NOTE**<br>- Default maximum width of the dialog box: 400 vp<br>- When this parameter is set to a percentage, the reference width of the dialog box is the width of the window where the dialog box is located. You can decrease or increase the width as needed.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 54| height<sup>12+</sup> | [Dimension](ts-types.md#dimension10) | No | Height of the dialog box.<br>**NOTE**<br>- Default maximum height of the dialog box: 0.9 x (Window height – Safe area)<br>- When this parameter is set to a percentage, the reference height of the dialog box is the height of the window where the dialog box is located minus the safe area. You can decrease or increase the height as needed.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 55| borderWidth<sup>12+</sup> | [Dimension](ts-types.md#dimension10) \| [EdgeWidths](ts-types.md#edgewidths9) \| [LocalizedEdgeWidths](ts-types.md#localizededgewidths12) | No | <br>You can set the width for all four sides or set separate widths for individual sides.<br>Default value: **0**<br> When set to a percentage, the value defines the border width as a percentage of the parent dialog box's width.<br>If the left and right borders are greater than its width, or the top and bottom borders are greater than its height, the dialog box may not display as expected.<br>**NOTE**<br>When **borderWidth** is of type LocalizedEdgeWidths, the layout order can be dynamically adjusted based on the user's language settings.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 56| borderColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](ts-types.md#edgecolors9) \| [LocalizedEdgeColors](ts-types.md#localizededgecolors12) | No | Border color of the dialog box.<br>Default value: **Color.Black**<br> **borderColor** must be used with **borderWidth** in pairs. **NOTE**<br>When **borderColor** is of type LocalizedEdgeColors, the layout order can be dynamically adjusted based on the user's language settings.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 57| borderStyle<sup>12+</sup> | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](ts-types.md#edgestyles9) | No | Border style of the dialog box.<br>Default value: **BorderStyle.Solid**<br>**borderStyle** must be used with **borderWidth** in pairs.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 58| shadow<sup>12+</sup> | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10) | No | Shadow of the dialog box.<br> Default value on 2-in-1 devices: **ShadowStyle.OUTER_FLOATING_MD** when the dialog box is focused and **ShadowStyle.OUTER_FLOATING_SM** otherwise<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 59| textStyle<sup>12+</sup> | [TextStyle](#textstyle12) | No | Text style of the message in the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 60| enableHoverMode<sup>14+</sup> | boolean | No | Whether to enable the hover state.<br>Default value: **false**, meaning not to enable the hover state.<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 61| hoverModeArea<sup>14+</sup> | [HoverModeAreaType](ts-appendix-enums.md#hovermodeareatype14) | No | Display area of the dialog box in the hover state.<br>Default value: **HoverModeAreaType.BOTTOM_SCREEN**<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 62| levelMode<sup>15+</sup> | [LevelMode](../js-apis-promptAction.md#levelmode15) | No | Display level of the dialog box.<br>**NOTE**<br>- Default value: **LevelMode.OVERLAY**<br>- This parameter takes effect only when **showInSubWindow** is set to **false**.<br>**Atomic service API**: This API can be used in atomic services since API version 15.| 63| levelUniqueId<sup>15+</sup> | number | No | [Unique ID](../js-apis-arkui-frameNode.md#getuniqueid12) of the node under the display level for the page-level dialog box.<br>**NOTE**<br>- This parameter takes effect only when **levelMode** is set to **LevelMode.EMBEDDED**.<br>**Atomic service API**: This API can be used in atomic services since API version 15.| 64| immersiveMode<sup>15+</sup> | [ImmersiveMode](../js-apis-promptAction.md#immersivemode15) | No | Overlay effect for the page-level dialog box.<br>**NOTE**<br>- Default value: **ImmersiveMode.DEFAULT**<br>- This parameter takes effect only when **levelMode** is set to **LevelMode.EMBEDDED**.<br>**Atomic service API**: This API can be used in atomic services since API version 15.| 65| levelOrder<sup>18+</sup> | [LevelOrder](#levelorder18) | No | Display order of the dialog box.<br>**NOTE**<br>- Default value: **LevelOrder.clamp(0)**<br>- Dynamic updating is not supported.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 66 67## LevelOrder<sup>18+</sup> 68 69type LevelOrder = LevelOrder 70 71Defines the display order of the dialog box. 72 73**Atomic service API**: This API can be used in atomic services since API version 18. 74 75**System capability**: SystemCapability.ArkUI.ArkUI.Full 76 77| Type | Description | 78| ----------------------------------------------------- | -------------------- | 79| [LevelOrder](../js-apis-promptAction.md#levelorder18) | Display order of the dialog box.| 80 81## AlertDialogParamWithConfirm 82 83Inherits from [AlertDialogParam](#alertdialogparam). 84 85**Atomic service API**: This API can be used in atomic services since API version 11. 86 87**System capability**: SystemCapability.ArkUI.ArkUI.Full 88 89| Name | Type | Mandatory | Description | 90| ---------- | ---------------- | ---------- | ------------------------------- | 91| confirm | [AlertDialogButtonBaseOptions](#alertdialogbuttonbaseoptions18) | No | Information about the confirm button. When the dialog box has focus and focus has not been shifted using the **Tab** key, the button responds to the **Enter** key by default, and multiple dialog boxes can gain focus consecutively to respond automatically. The default response to the **Enter** key does not work when **defaultFocus** is set to **true**.| 92 93Priorities of the **confirm** parameters: **fontColor** and **backgroundColor** > **style** > **defaultFocus** 94 95| backgroundColor | fontColor | style | defaultFocus | Effect | 96| --------------- | --------- | --------------------------- | ------------ | -------- | 97| Green | Red | - | - | Red text on green background| 98| Green | - | DialogButtonStyle.HIGHLIGHT | - | White text on green background| 99| Green | - | DialogButtonStyle.DEFAULT | - | Blue text on green background| 100| Green | - | - | TRUE | White text on green background| 101| Green | - | - | FALSE/- | Blue text on green background| 102| - | Red | DialogButtonStyle.HIGHLIGHT | - | Red text on blue background| 103| - | Red | DialogButtonStyle.DEFAULT | - | Red text on white background| 104| - | Red | - | TRUE | Red text on blue background| 105| - | Red | - | FALSE/- | Red text on white background| 106| - | - | DialogButtonStyle.HIGHLIGHT | - | White text on blue background| 107| - | - | DialogButtonStyle.DEFAULT | - | Blue text on white background| 108| - | - | - | TRUE | White text on blue background| 109| - | - | - | FALSE/- | Blue text on white background| 110 111## AlertDialogParamWithButtons 112 113Inherits from [AlertDialogParam](#alertdialogparam). 114 115**Atomic service API**: This API can be used in atomic services since API version 11. 116 117**System capability**: SystemCapability.ArkUI.ArkUI.Full 118 119| Name | Type | Mandatory | Description | 120| --------------- | ---------------------- | ------------ | --------------------- | 121| primaryButton | [AlertDialogButtonBaseOptions](#alertdialogbuttonbaseoptions18) | Yes| Information about the confirm button. When the dialog box has focus and focus has not been shifted using the **Tab** key, the button responds to the **Enter** key by default, and multiple dialog boxes can gain focus consecutively to respond automatically. The default response to the **Enter** key does not work when **defaultFocus** is set to **true**.| 122| secondaryButton | [AlertDialogButtonBaseOptions](#alertdialogbuttonbaseoptions18) | Yes| Information about the confirm button.| 123 124## AlertDialogParamWithOptions<sup>10+</sup> 125 126Inherits from [AlertDialogParam](#alertdialogparam). 127 128**Atomic service API**: This API can be used in atomic services since API version 11. 129 130**System capability**: SystemCapability.ArkUI.ArkUI.Full 131 132| Name | Type | Mandatory | Description | 133| --------------- | ---------------------- | ------------ | --------------------- | 134| buttons | Array<[AlertDialogButtonOptions](#alertdialogbuttonoptions10)> | Yes | Buttons in the dialog box.| 135|buttonDirection | [DialogButtonDirection](#dialogbuttondirection10)| No | Direction in which buttons are laid out.<br>Default value: **DialogButtonDirection.AUTO**<br>When there are more than three buttons, the Auto mode (which automatically switches to the vertical layout when there are more than two buttons) is recommended. In non-Auto mode, buttons that extend beyond the display area are clipped.| 136 137## AlertDialogButtonOptions<sup>10+</sup> 138 139Inherits from [AlertDialogButtonBaseOptions](#alertdialogbuttonbaseoptions18). 140 141**System capability**: SystemCapability.ArkUI.ArkUI.Full 142 143| Name | Type | Mandatory| Description | 144| --------------------- | ------- | ---- | ------------------------------------------------------------ | 145| primary<sup>12+</sup> | boolean | No | Whether the button responds to the **Enter** key by default when the dialog box has focus and the **Tab** key is not pressed for sequential focus navigation. If there are multiple buttons, set this parameter to **true** for only one button. Otherwise, no button will respond. Multiple dialog boxes can automatically gain focus and respond to user interactions in a sequential manner. This parameter does not take effect when **defaultFocus** is set to **true**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 146 147## AlertDialogButtonBaseOptions<sup>18+</sup> 148 149**Atomic service API**: This API can be used in atomic services since API version 18. 150 151**System capability**: SystemCapability.ArkUI.ArkUI.Full 152 153| Name | Type | Mandatory | Description | 154| ------------------| ---------------------- | ------------ | --------------------- | 155| enabled<sup>10+</sup> | boolean | No | Whether to respond when the button is clicked.<br>Default value: **true**<br>**true**: Respond when the button is clicked. <br>**false**: Do not respond when the button is clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 156| defaultFocus<sup>10+</sup> | boolean | No | Whether the button is the default focus.<br>Default value: **false**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 157| style<sup>10+</sup> | [DialogButtonStyle](ts-appendix-enums.md#dialogbuttonstyle10) | No | Style of the button.<br>Default value: **DialogButtonStyle.DEFAULT**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 158| value<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | Yes | Text of the button. If the value is null, the button is not displayed. <br>**Atomic service API**: This API can be used in atomic services since API version 11.| 159| fontColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the button.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 160| backgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the button.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 161| action<sup>10+</sup> | [VoidCallback](ts-types.md#voidcallback12) | Yes | Callback upon button clicking.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 162 163## DialogButtonDirection<sup>10+</sup> 164 165**Atomic service API**: This API can be used in atomic services since API version 11. 166 167**System capability**: SystemCapability.ArkUI.ArkUI.Full 168 169| Name | Value | Description | 170| -------------------------- | --------- | --------- | 171| AUTO | 0 | Buttons are laid out horizontally when there are two or fewer buttons and vertically otherwise.| 172| HORIZONTAL | 1 | Buttons are laid out horizontally.| 173| VERTICAL | 2 | Buttons are laid out vertically.| 174 175## DialogAlignment 176 177**Atomic service API**: This API can be used in atomic services since API version 11. 178 179**System capability**: SystemCapability.ArkUI.ArkUI.Full 180 181| Name | Description | 182| ------------------------ | -------------- | 183| Top | Vertical top alignment.| 184| Center | Vertical center alignment.| 185| Bottom | Vertical bottom alignment.| 186| Default | Default alignment. | 187| TopStart<sup>8+</sup> | Top left alignment. | 188| TopEnd<sup>8+</sup> | Top right alignment. | 189| CenterStart<sup>8+</sup> | Center left alignment. | 190| CenterEnd<sup>8+</sup> | Center right alignment. | 191| BottomStart<sup>8+</sup> | Bottom left alignment. | 192| BottomEnd<sup>8+</sup> | Bottom right alignment. | 193 194## Rectangle<sup>8+</sup> 195 196The **Rectangle** type is used to represent a mask area of a dialog box. 197 198**Widget capability**: This API can be used in ArkTS widgets since API version 9. 199 200**Atomic service API**: This API can be used in atomic services since API version 11. 201 202**System capability**: SystemCapability.ArkUI.ArkUI.Full 203 204| Name | Type | Mandatory| Description | 205|--------|------------------------------|----|-----------------------------------| 206| x | [Length](ts-types.md#length) | No | X coordinate of the mask area of the dialog box relative to the upper left corner of the window.<br>Default value: **0vp**| 207| y | [Length](ts-types.md#length) | No | Y coordinate of the mask area of the dialog box relative to the upper left corner of the window.<br>Default value: **0vp**| 208| width | [Length](ts-types.md#length) | No | Width of the mask area of the dialog box.<br>Default value: **'100%'** | 209| height | [Length](ts-types.md#length) | No | Height of the mask area of the dialog box.<br>Default value: **'100%'** | 210 211> **NOTE** 212> 213> **x** and **y** can be set to a positive or negative percentage value. When **x** is set to **'100%'**, the mask area is moved rightward by the window width. When **x** is set to **'-100%'**, the mask area is moved leftward by the window width. When **y** is set to **'100%'**, the mask area is moved downward by the window height. When **y** is set to **'-100%'**, the mask area is moved upward by the window height. 214> 215> **width** and **height** can be set in percentage and can only be set to positive values. If they are set to negative values, the default values are used instead. 216> 217> The percentage is calculated based on the width and height of the window. 218 219## DismissDialogAction<sup>12+</sup> 220 221Provides information about the action to dismiss the dialog box. 222 223**Atomic service API**: This API can be used in atomic services since API version 12. 224 225**System capability**: SystemCapability.ArkUI.ArkUI.Full 226 227### Properties 228 229| Name | Type | Readable| Writable| Description | 230| ------- | ------------------------------------------------------------ | ---- | ---- | ------------------------------------------------------------ | 231| dismiss | Callback<void> | No | No | Callback for closing the dialog box. This API is called only when the dialog box needs to be exited.| 232| reason | [DismissReason](../js-apis-promptAction.md#dismissreason12) | No | No | Reason why the dialog box cannot be closed. You must specify whether to close the dialog box for each of the listed actions.| 233 234## TextStyle<sup>12+</sup> 235 236**Atomic service API**: This API can be used in atomic services since API version 12. 237 238**System capability**: SystemCapability.ArkUI.ArkUI.Full 239 240| Name | Type | Mandatory| Description | 241|--------|------------------------------|----|-----------------------------------| 242| wordBreak | [WordBreak](ts-appendix-enums.md#wordbreak11) | No | Word break rule.<br>Default value: **WordBreak.BREAK_ALL**| 243 244## Example 245 246### Example 1: Displaying Dialog Boxes with Different Numbers of Buttons 247 248> **NOTE** 249> 250> To avoid confusion with **AlertDialog** instances, it is recommended that you obtain a **UIContext** instance using the [getUIContext](../js-apis-arkui-UIContext.md#uicontext) API, and then use the [showAlertDialog](../js-apis-arkui-UIContext.md#showalertdialog) API to invoke the instance's **AlertDialog.show()** method. 251 252This example demonstrates how to display dialog boxes with one, two, and three buttons. 253 254```ts 255// xxx.ets 256@Entry 257@Component 258struct AlertDialogExample { 259 build() { 260 Column({ space: 5 }) { 261 Button('one button dialog') 262 .onClick(() => { 263 // You are advised to use this.getUIContext().showAlertDialog(). 264 AlertDialog.show( 265 { 266 title: 'title', 267 message: 'text', 268 autoCancel: true, 269 alignment: DialogAlignment.Bottom, 270 offset: { dx: 0, dy: -20 }, 271 gridCount: 3, 272 confirm: { 273 value: 'button', 274 action: () => { 275 console.info('Button-clicking callback') 276 } 277 }, 278 cancel: () => { 279 console.info('Closed callbacks') 280 }, 281 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 282 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 283 console.log("dialog onWillDismiss") 284 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 285 dismissDialogAction.dismiss() 286 } 287 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 288 dismissDialogAction.dismiss() 289 } 290 } 291 } 292 ) 293 }) 294 .backgroundColor(0x317aff) 295 Button('two button dialog') 296 .onClick(() => { 297 // You are advised to use this.getUIContext().showAlertDialog(). 298 AlertDialog.show( 299 { 300 title: 'title', 301 subtitle: 'subtitle', 302 message: 'text', 303 autoCancel: true, 304 alignment: DialogAlignment.Bottom, 305 gridCount: 4, 306 offset: { dx: 0, dy: -20 }, 307 primaryButton: { 308 value: 'cancel', 309 action: () => { 310 console.info('Callback when the first button is clicked') 311 } 312 }, 313 secondaryButton: { 314 enabled: true, 315 defaultFocus: true, 316 style: DialogButtonStyle.HIGHLIGHT, 317 value: 'ok', 318 action: () => { 319 console.info('Callback when the second button is clicked') 320 } 321 }, 322 cancel: () => { 323 console.info('Closed callbacks') 324 }, 325 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 326 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 327 console.log("dialog onWillDismiss") 328 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 329 dismissDialogAction.dismiss() 330 } 331 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 332 dismissDialogAction.dismiss() 333 } 334 } 335 } 336 ) 337 }).backgroundColor(0x317aff) 338 Button('three button dialog') 339 .onClick(() => { 340 // You are advised to use this.getUIContext().showAlertDialog(). 341 AlertDialog.show( 342 { 343 title: 'title', 344 subtitle: 'subtitle', 345 message: 'text', 346 autoCancel: true, 347 alignment: DialogAlignment.Bottom, 348 gridCount: 4, 349 offset: { dx: 0, dy: -20 }, 350 buttonDirection: DialogButtonDirection.HORIZONTAL, 351 buttons: [ 352 { 353 value: 'Button', 354 action: () => { 355 console.info('Callback when button1 is clicked') 356 } 357 }, 358 { 359 value: 'Button', 360 action: () => { 361 console.info('Callback when button2 is clicked') 362 } 363 }, 364 { 365 value: 'Button', 366 enabled: true, 367 defaultFocus: true, 368 style: DialogButtonStyle.HIGHLIGHT, 369 action: () => { 370 console.info('Callback when button3 is clicked') 371 } 372 }, 373 ], 374 cancel: () => { 375 console.info('Closed callbacks') 376 }, 377 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 378 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 379 console.log("dialog onWillDismiss") 380 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 381 dismissDialogAction.dismiss() 382 } 383 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 384 dismissDialogAction.dismiss() 385 } 386 } 387 } 388 ) 389 }).backgroundColor(0x317aff) 390 }.width('100%').margin({ top: 5 }) 391 } 392} 393``` 394 395 396 397### Example 2: Opening a Dialog Box Outside the Main Window 398 399This example demonstrates how to configure a dialog box to display outside the main window on a 2-in-1 device by setting **showInSubWindow** to **true**. 400 401> **NOTE** 402> 403> To avoid confusion with **AlertDialog** instances, it is recommended that you obtain a **UIContext** instance using the [getUIContext](../js-apis-arkui-UIContext.md#uicontext) API, and then use the [showAlertDialog](../js-apis-arkui-UIContext.md#showalertdialog) API to invoke the instance's **AlertDialog.show()** method. 404 405```ts 406// xxx.ets 407@Entry 408@Component 409struct AlertDialogExample { 410 build() { 411 Column({ space: 5 }) { 412 Button('one button dialog') 413 .onClick(() => { 414 // You are advised to use this.getUIContext().showAlertDialog(). 415 AlertDialog.show( 416 { 417 title: 'title', 418 subtitle: 'subtitle', 419 message: 'text', 420 autoCancel: true, 421 alignment: DialogAlignment.Center, 422 gridCount: 4, 423 showInSubWindow: true, 424 isModal: true, 425 offset: { dx: 0, dy: -20 }, 426 buttonDirection: DialogButtonDirection.HORIZONTAL, 427 buttons: [ 428 { 429 value: 'Button', 430 action: () => { 431 console.info('Callback when button1 is clicked') 432 } 433 }, 434 { 435 value: 'Button', 436 action: () => { 437 console.info('Callback when button2 is clicked') 438 } 439 }, 440 { 441 value: 'Button', 442 enabled: true, 443 defaultFocus: true, 444 style: DialogButtonStyle.HIGHLIGHT, 445 action: () => { 446 console.info('Callback when button3 is clicked') 447 } 448 }, 449 ], 450 cancel: () => { 451 console.info('Closed callbacks') 452 }, 453 onWillDismiss: (dismissDialogAction: DismissDialogAction) => { 454 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 455 console.log("dialog onWillDismiss") 456 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 457 dismissDialogAction.dismiss() 458 } 459 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 460 dismissDialogAction.dismiss() 461 } 462 } 463 }) 464 }) 465 }.width('100%').margin({ top: 5 }).backgroundColor(0x317aff) 466 } 467} 468``` 469 470 471 472### Example 3: Setting the Dialog Box Animation 473This example illustrates how to use the **transition** API to create custom animation effects for the dialog box's appearance and disappearance. 474 475> **NOTE** 476> 477> To avoid confusion with **AlertDialog** instances, it is recommended that you obtain a **UIContext** instance using the [getUIContext](../js-apis-arkui-UIContext.md#uicontext) API, and then use the [showAlertDialog](../js-apis-arkui-UIContext.md#showalertdialog) API to invoke the instance's **AlertDialog.show()** method. 478 479```ts 480// xxx.ets 481@Entry 482@Component 483struct AlertDialogExample { 484 build() { 485 Column({ space: 5 }) { 486 Button('AlertDialog Set Duration') 487 .onClick(()=>{ 488 // You are advised to use this.getUIContext().showAlertDialog(). 489 AlertDialog.show( 490 { 491 title: 'AlertDialog 1', 492 message: 'Set Animation Duration open 3 second, close 100ms', 493 autoCancel: true, 494 alignment: DialogAlignment.Top, 495 offset: { dx: 0, dy: -20 }, 496 gridCount: 3, 497 transition:TransitionEffect.asymmetric(TransitionEffect.OPACITY 498 .animation({ duration: 3000, curve: Curve.Sharp }).combine(TransitionEffect.scale({x: 1.5, y: 1.5}).animation({duration: 3000, curve: Curve.Sharp})), 499 TransitionEffect.OPACITY.animation({ duration: 100, curve: Curve.Smooth }) 500 .combine(TransitionEffect.scale({x: 0.5, y: 0.5}).animation({duration: 100, curve: Curve.Smooth}))), 501 confirm: { 502 value: 'button', 503 action: () => { 504 console.info('Button-clicking callback') 505 } 506 }, 507 cancel: () => { 508 console.info('Closed callbacks') 509 } 510 } 511 ) 512 }) 513 .backgroundColor(0x317aff).height("88px") 514 }.width('100%').margin({ top: 5 }) 515 } 516} 517``` 518 519 520 521### Example 4: Setting the Dialog Box Style 522This example demonstrates how to set styles of an alert dialog box, including the width, height, background color, and shadow. 523 524> **NOTE** 525> 526> To avoid confusion with **AlertDialog** instances, it is recommended that you obtain a **UIContext** instance using the [getUIContext](../js-apis-arkui-UIContext.md#uicontext) API, and then use the [showAlertDialog](../js-apis-arkui-UIContext.md#showalertdialog) API to invoke the instance's **AlertDialog.show()** method. 527 528```ts 529// xxx.ets 530@Entry 531@Component 532struct AlertDialogExample { 533 build() { 534 Column({ space: 5 }) { 535 Button('one button dialog') 536 .onClick(() => { 537 // You are advised to use this.getUIContext().showAlertDialog(). 538 AlertDialog.show( 539 { 540 title: 'title', 541 message: 'text', 542 autoCancel: true, 543 alignment: DialogAlignment.Center, 544 offset: { dx: 0, dy: -20 }, 545 gridCount: 3, 546 width: 300, 547 height: 200, 548 cornerRadius: 20, 549 borderWidth: 1, 550 borderStyle: BorderStyle.Dashed,// borderStyle must be used with borderWidth in pairs. 551 borderColor: Color.Blue,// borderColor must be used with borderWidth in pairs. 552 backgroundColor: Color.White, 553 shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}), 554 textStyle: { wordBreak: WordBreak.BREAK_ALL }, 555 confirm: { 556 value: 'button', 557 action: () => { 558 console.info('Button-clicking callback') 559 } 560 }, 561 cancel: () => { 562 console.info('Closed callbacks') 563 }, 564 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 565 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 566 console.log("dialog onWillDismiss") 567 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 568 dismissDialogAction.dismiss() 569 } 570 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 571 dismissDialogAction.dismiss() 572 } 573 } 574 } 575 ) 576 }) 577 .backgroundColor(0x317aff) 578 }.width('100%').margin({ top: 5 }) 579 } 580} 581``` 582 583 584 585### Example 5: Configuring a Dialog Box in the Hover State 586 587This example demonstrates how to set the layout area of a dialog box in hover mode on a foldable device. 588 589```ts 590@Entry 591@Component 592struct AlertDialogExample { 593 build() { 594 Column({ space: 5 }) { 595 Button('one button dialog') 596 .onClick(() => { 597 AlertDialog.show( 598 { 599 title: 'title', 600 message: 'text', 601 autoCancel: true, 602 alignment: DialogAlignment.Bottom, 603 gridCount: 3, 604 confirm: { 605 value: 'button', 606 action: () => { 607 console.info('Button-clicking callback') 608 } 609 }, 610 cancel: () => { 611 console.info('Closed callbacks') 612 }, 613 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 614 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)); 615 console.log("dialog onWillDismiss"); 616 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 617 dismissDialogAction.dismiss(); 618 } 619 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 620 dismissDialogAction.dismiss(); 621 } 622 }, 623 enableHoverMode: true, 624 hoverModeArea: HoverModeAreaType.TOP_SCREEN 625 } 626 ) 627 }) 628 .backgroundColor(0x317aff) 629 }.width('100%').margin({ top: 5 }) 630 } 631} 632``` 633 634 635
