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>**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 sub-window 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>13+</sup> | boolean | No | Whether to enable the hover state.<br>Default value: **false**, meaning not to enable the hover state.| 61| hoverModeArea<sup>13+</sup> | [HoverModeAreaType](ts-appendix-enums.md#hovermodeareatype13) | No | Display area of the dialog box in the hover state.<br>Default value: **HoverModeAreaType.BOTTOM_SCREEN**| 62 63## AlertDialogParamWithConfirm 64 65Inherits [AlertDialogParam](#alertdialogparam). 66 67**Atomic service API**: This API can be used in atomic services since API version 11. 68 69**System capability**: SystemCapability.ArkUI.ArkUI.Full 70 71| Name | Type | Mandatory | Description | 72| ---------- | ---------------- | ---------- | ------------------------------- | 73| confirm | [AlertDialogButtonBaseOptions](#alertdialogbuttonbaseoptions13) | 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**.| 74 75Priorities of the **confirm** parameters: **fontColor** and **backgroundColor** > **style** > **defaultFocus** 76 77| backgroundColor | fontColor | style | defaultFocus | Effect | 78| --------------- | --------- | --------------------------- | ------------ | -------- | 79| Green | Red | - | - | Red text on green background| 80| Green | - | DialogButtonStyle.HIGHLIGHT | - | White text on green background| 81| Green | - | DialogButtonStyle.DEFAULT | - | Blue text on green background| 82| Green | - | - | TRUE | White text on green background| 83| Green | - | - | FALSE/- | Blue text on green background| 84| - | Red | DialogButtonStyle.HIGHLIGHT | - | Red text on blue background| 85| - | Red | DialogButtonStyle.DEFAULT | - | Red text on white background| 86| - | Red | - | TRUE | Red text on blue background| 87| - | Red | - | FALSE/- | Red text on white background| 88| - | - | DialogButtonStyle.HIGHLIGHT | - | White text on blue background| 89| - | - | DialogButtonStyle.DEFAULT | - | Blue text on white background| 90| - | - | - | TRUE | White text on blue background| 91| - | - | - | FALSE/- | Blue text on white background| 92 93## AlertDialogParamWithButtons 94 95Inherits [AlertDialogParam](#alertdialogparam). 96 97**Atomic service API**: This API can be used in atomic services since API version 11. 98 99**System capability**: SystemCapability.ArkUI.ArkUI.Full 100 101| Name | Type | Mandatory | Description | 102| --------------- | ---------------------- | ------------ | --------------------- | 103| primaryButton | [AlertDialogButtonBaseOptions](#alertdialogbuttonbaseoptions13) | 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**.| 104| secondaryButton | [AlertDialogButtonBaseOptions](#alertdialogbuttonbaseoptions13) | Yes| Information about the confirm button.| 105 106## AlertDialogParamWithOptions<sup>10+</sup> 107 108Inherits [AlertDialogParam](#alertdialogparam). 109 110**Atomic service API**: This API can be used in atomic services since API version 11. 111 112**System capability**: SystemCapability.ArkUI.ArkUI.Full 113 114| Name | Type | Mandatory | Description | 115| --------------- | ---------------------- | ------------ | --------------------- | 116| buttons | Array<[AlertDialogButtonOptions](#alertdialogbuttonoptions10)> | Yes | Buttons in the dialog box.| 117|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.| 118 119## AlertDialogButtonOptions<sup>10+</sup> 120 121Inherits [AlertDialogButtonBaseOptions](#alertdialogbuttonbaseoptions13). 122 123**System capability**: SystemCapability.ArkUI.ArkUI.Full 124 125| Name | Type | Mandatory| Description | 126| --------------------- | ------- | ---- | ------------------------------------------------------------ | 127| 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.| 128 129## AlertDialogButtonBaseOptions<sup>13+</sup> 130 131**Atomic service API**: This API can be used in atomic services since API version 13. 132 133**System capability**: SystemCapability.ArkUI.ArkUI.Full 134 135| Name | Type | Mandatory | Description | 136| ------------------| ---------------------- | ------------ | --------------------- | 137| enabled | boolean | No | Whether to respond when the button is clicked.<br>Default value: **true**| 138| defaultFocus | boolean | No | Whether the button is the default focus.<br>Default value: **false**| 139| style | [DialogButtonStyle](ts-appendix-enums.md#dialogbuttonstyle10) | No | Style of the button.<br>Default value: **DialogButtonStyle.DEFAULT**| 140| value | [ResourceStr](ts-types.md#resourcestr) | Yes | Text of the button. If the value is null, the button is not displayed. | 141| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the button.| 142| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the button.| 143| action | [VoidCallback](ts-types.md#voidcallback12) | Yes | Callback upon button clicking.| 144 145## DialogButtonDirection<sup>10+</sup> 146 147**Atomic service API**: This API can be used in atomic services since API version 11. 148 149**System capability**: SystemCapability.ArkUI.ArkUI.Full 150 151| Name | Description | 152| -------------------------- | --------- | 153| AUTO | Buttons are laid out horizontally when there are two or fewer buttons and vertically otherwise.| 154| HORIZONTAL | Buttons are laid out horizontally.| 155| VERTICAL | Buttons are laid out vertically.| 156 157## DialogAlignment 158 159**Atomic service API**: This API can be used in atomic services since API version 11. 160 161**System capability**: SystemCapability.ArkUI.ArkUI.Full 162 163| Name | Description | 164| ------------------------ | -------------- | 165| Top | Vertical top alignment.| 166| Center | Vertical center alignment.| 167| Bottom | Vertical bottom alignment.| 168| Default | Default alignment. | 169| TopStart<sup>8+</sup> | Top left alignment. | 170| TopEnd<sup>8+</sup> | Top right alignment. | 171| CenterStart<sup>8+</sup> | Center left alignment. | 172| CenterEnd<sup>8+</sup> | Center right alignment. | 173| BottomStart<sup>8+</sup> | Bottom left alignment. | 174| BottomEnd<sup>8+</sup> | Bottom right alignment. | 175 176## Rectangle<sup>8+</sup> 177 178The **Rectangle** type is used to represent a mask area of a dialog box. 179 180**Widget capability**: This API can be used in ArkTS widgets since API version 9. 181 182**Atomic service API**: This API can be used in atomic services since API version 11. 183 184**System capability**: SystemCapability.ArkUI.ArkUI.Full 185 186| Name | Type | Mandatory| Description | 187|--------|------------------------------|----|-----------------------------------| 188| 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**| 189| 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**| 190| width | [Length](ts-types.md#length) | No | Width of the mask area of the dialog box.<br>Default value: **'100%'** | 191| height | [Length](ts-types.md#length) | No | Height of the mask area of the dialog box.<br>Default value: **'100%'** | 192 193> **NOTE** 194> 195> **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. 196> 197> **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. 198> 199> The percentage is calculated based on the width and height of the window. 200 201## DismissDialogAction<sup>12+</sup> 202 203Provides information about the action to dismiss the dialog box. 204 205**Atomic service API**: This API can be used in atomic services since API version 12. 206 207**System capability**: SystemCapability.ArkUI.ArkUI.Full 208 209### Properties 210 211| Name | Type | Readable| Writable| Description | 212| ------- | ------------------------------------------------------------ | ---- | ---- | ------------------------------------------------------------ | 213| dismiss | Callback<void> | No | No | Callback for closing the dialog box. This API is called only when the dialog box needs to be exited.| 214| 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.| 215 216## TextStyle<sup>12+</sup> 217 218**Atomic service API**: This API can be used in atomic services since API version 12. 219 220**System capability**: SystemCapability.ArkUI.ArkUI.Full 221 222| Name | Type | Mandatory| Description | 223|--------|------------------------------|----|-----------------------------------| 224| wordBreak | [WordBreak](ts-appendix-enums.md#wordbreak11) | No | Word break rule.<br>Default value: **WordBreak.BREAK_ALL**| 225 226## Example 227 228### Example 1 229 230> **NOTE** 231> 232> 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. 233 234This example shows three alert dialog boxes, with one, two, and three buttons, respectively. 235 236```ts 237// xxx.ets 238@Entry 239@Component 240struct AlertDialogExample { 241 build() { 242 Column({ space: 5 }) { 243 Button('one button dialog') 244 .onClick(() => { 245 // You are advised to use this.getUIContext().showAlertDialog(). 246 AlertDialog.show( 247 { 248 title: 'title', 249 message: 'text', 250 autoCancel: true, 251 alignment: DialogAlignment.Bottom, 252 offset: { dx: 0, dy: -20 }, 253 gridCount: 3, 254 confirm: { 255 value: 'button', 256 action: () => { 257 console.info('Button-clicking callback') 258 } 259 }, 260 cancel: () => { 261 console.info('Closed callbacks') 262 }, 263 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 264 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 265 console.log("dialog onWillDismiss") 266 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 267 dismissDialogAction.dismiss() 268 } 269 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 270 dismissDialogAction.dismiss() 271 } 272 } 273 } 274 ) 275 }) 276 .backgroundColor(0x317aff) 277 Button('two button dialog') 278 .onClick(() => { 279 // You are advised to use this.getUIContext().showAlertDialog(). 280 AlertDialog.show( 281 { 282 title: 'title', 283 subtitle: 'subtitle', 284 message: 'text', 285 autoCancel: true, 286 alignment: DialogAlignment.Bottom, 287 gridCount: 4, 288 offset: { dx: 0, dy: -20 }, 289 primaryButton: { 290 value: 'cancel', 291 action: () => { 292 console.info('Callback when the first button is clicked') 293 } 294 }, 295 secondaryButton: { 296 enabled: true, 297 defaultFocus: true, 298 style: DialogButtonStyle.HIGHLIGHT, 299 value: 'ok', 300 action: () => { 301 console.info('Callback when the second button is clicked') 302 } 303 }, 304 cancel: () => { 305 console.info('Closed callbacks') 306 }, 307 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 308 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 309 console.log("dialog onWillDismiss") 310 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 311 dismissDialogAction.dismiss() 312 } 313 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 314 dismissDialogAction.dismiss() 315 } 316 } 317 } 318 ) 319 }).backgroundColor(0x317aff) 320 Button('three button dialog') 321 .onClick(() => { 322 // You are advised to use this.getUIContext().showAlertDialog(). 323 AlertDialog.show( 324 { 325 title: 'title', 326 subtitle: 'subtitle', 327 message: 'text', 328 autoCancel: true, 329 alignment: DialogAlignment.Bottom, 330 gridCount: 4, 331 offset: { dx: 0, dy: -20 }, 332 buttonDirection: DialogButtonDirection.HORIZONTAL, 333 buttons: [ 334 { 335 value: 'Button', 336 action: () => { 337 console.info('Callback when button1 is clicked') 338 } 339 }, 340 { 341 value: 'Button', 342 action: () => { 343 console.info('Callback when button2 is clicked') 344 } 345 }, 346 { 347 value: 'Button', 348 enabled: true, 349 defaultFocus: true, 350 style: DialogButtonStyle.HIGHLIGHT, 351 action: () => { 352 console.info('Callback when button3 is clicked') 353 } 354 }, 355 ], 356 cancel: () => { 357 console.info('Closed callbacks') 358 }, 359 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 360 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 361 console.log("dialog onWillDismiss") 362 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 363 dismissDialogAction.dismiss() 364 } 365 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 366 dismissDialogAction.dismiss() 367 } 368 } 369 } 370 ) 371 }).backgroundColor(0x317aff) 372 }.width('100%').margin({ top: 5 }) 373 } 374} 375``` 376 377 378 379### Example 2 380 381This example shows an alert dialog box that can be displayed outside the main window. 382 383> **NOTE** 384> 385> 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. 386 387```ts 388// xxx.ets 389@Entry 390@Component 391struct AlertDialogExample { 392 build() { 393 Column({ space: 5 }) { 394 Button('one button dialog') 395 .onClick(() => { 396 // You are advised to use this.getUIContext().showAlertDialog(). 397 AlertDialog.show( 398 { 399 title: 'title', 400 subtitle: 'subtitle', 401 message: 'text', 402 autoCancel: true, 403 alignment: DialogAlignment.Center, 404 gridCount: 4, 405 showInSubWindow: true, 406 isModal: true, 407 offset: { dx: 0, dy: -20 }, 408 buttonDirection: DialogButtonDirection.HORIZONTAL, 409 buttons: [ 410 { 411 value: 'Button', 412 action: () => { 413 console.info('Callback when button1 is clicked') 414 } 415 }, 416 { 417 value: 'Button', 418 action: () => { 419 console.info('Callback when button2 is clicked') 420 } 421 }, 422 { 423 value: 'Button', 424 enabled: true, 425 defaultFocus: true, 426 style: DialogButtonStyle.HIGHLIGHT, 427 action: () => { 428 console.info('Callback when button3 is clicked') 429 } 430 }, 431 ], 432 cancel: () => { 433 console.info('Closed callbacks') 434 }, 435 onWillDismiss: (dismissDialogAction: DismissDialogAction) => { 436 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 437 console.log("dialog onWillDismiss") 438 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 439 dismissDialogAction.dismiss() 440 } 441 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 442 dismissDialogAction.dismiss() 443 } 444 } 445 }) 446 }) 447 }.width('100%').margin({ top: 5 }).backgroundColor(0x317aff) 448 } 449} 450``` 451 452 453 454### Example 3 455This example sets a 3s entrance animation and a 100 ms exit animation for the alert dialog. 456 457> **NOTE** 458> 459> 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. 460 461```ts 462// xxx.ets 463@Entry 464@Component 465struct AlertDialogExample { 466 build() { 467 Column({ space: 5 }) { 468 Button('AlertDialog Set Duration') 469 .onClick(()=>{ 470 // You are advised to use this.getUIContext().showAlertDialog(). 471 AlertDialog.show( 472 { 473 title: 'AlertDialog 1', 474 message: 'Set Animation Duration open 3 second, close 100ms', 475 autoCancel: true, 476 alignment: DialogAlignment.Top, 477 offset: { dx: 0, dy: -20 }, 478 gridCount: 3, 479 transition:TransitionEffect.asymmetric(TransitionEffect.OPACITY 480 .animation({ duration: 3000, curve: Curve.Sharp }).combine(TransitionEffect.scale({x: 1.5, y: 1.5}).animation({duration: 3000, curve: Curve.Sharp})), 481 TransitionEffect.OPACITY.animation({ duration: 100, curve: Curve.Smooth }) 482 .combine(TransitionEffect.scale({x: 0.5, y: 0.5}).animation({duration: 100, curve: Curve.Smooth}))), 483 confirm: { 484 value: 'button', 485 action: () => { 486 console.info('Button-clicking callback') 487 } 488 }, 489 cancel: () => { 490 console.info('Closed callbacks') 491 } 492 } 493 ) 494 }) 495 .backgroundColor(0x317aff).height("88px") 496 }.width('100%').margin({ top: 5 }) 497 } 498} 499``` 500 501 502 503### Example 4 504This example demonstrates how to set styles of an alert dialog box, including the width, height, background color, and shadow. 505 506> **NOTE** 507> 508> 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. 509 510```ts 511// xxx.ets 512@Entry 513@Component 514struct AlertDialogExample { 515 build() { 516 Column({ space: 5 }) { 517 Button('one button dialog') 518 .onClick(() => { 519 // You are advised to use this.getUIContext().showAlertDialog(). 520 AlertDialog.show( 521 { 522 title: 'title', 523 message: 'text', 524 autoCancel: true, 525 alignment: DialogAlignment.Center, 526 offset: { dx: 0, dy: -20 }, 527 gridCount: 3, 528 width: 300, 529 height: 200, 530 cornerRadius: 20, 531 borderWidth: 1, 532 borderStyle: BorderStyle.Dashed,// borderStyle must be used with borderWidth in pairs. 533 borderColor: Color.Blue,// borderColor must be used with borderWidth in pairs. 534 backgroundColor: Color.White, 535 shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}), 536 textStyle: { wordBreak: WordBreak.BREAK_ALL }, 537 confirm: { 538 value: 'button', 539 action: () => { 540 console.info('Button-clicking callback') 541 } 542 }, 543 cancel: () => { 544 console.info('Closed callbacks') 545 }, 546 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 547 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 548 console.log("dialog onWillDismiss") 549 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 550 dismissDialogAction.dismiss() 551 } 552 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 553 dismissDialogAction.dismiss() 554 } 555 } 556 } 557 ) 558 }) 559 .backgroundColor(0x317aff) 560 }.width('100%').margin({ top: 5 }) 561 } 562} 563``` 564 565 566 567### Example 5 568 569This example demonstrates how to set the layout area of a dialog box in hover mode on a foldable device. 570 571```ts 572@Entry 573@Component 574struct AlertDialogExample { 575 build() { 576 Column({ space: 5 }) { 577 Button('one button dialog') 578 .onClick(() => { 579 AlertDialog.show( 580 { 581 title: 'title', 582 message: 'text', 583 autoCancel: true, 584 alignment: DialogAlignment.Bottom, 585 gridCount: 3, 586 confirm: { 587 value: 'button', 588 action: () => { 589 console.info('Button-clicking callback') 590 } 591 }, 592 cancel: () => { 593 console.info('Closed callbacks') 594 }, 595 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 596 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)); 597 console.log("dialog onWillDismiss"); 598 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 599 dismissDialogAction.dismiss(); 600 } 601 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 602 dismissDialogAction.dismiss(); 603 } 604 }, 605 enableHoverMode: true, 606 hoverModeArea: HoverModeAreaType.TOP_SCREEN 607 } 608 ) 609 }) 610 .backgroundColor(0x317aff) 611 }.width('100%').margin({ top: 5 }) 612 } 613} 614``` 615 616 617
