1# Alert Dialog Box 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 10## Attributes 11 12| Name | Type | Description| 13| ---- | --------------- | -------- | 14| show | [AlertDialogParamWithConfirm](#alertdialogparamwithconfirm) \| [AlertDialogParamWithButtons](#alertdialogparamwithbuttons) | Defines and displays the **<AlertDialog>** component.| 15 16## AlertDialogParamWithConfirm 17| Name | Type | Mandatory | Description | 18| ---------- | ---------------- | ---------- | ------------------------------- | 19| title | [ResourceStr](ts-types.md#resourcestr) | No | Title of the dialog box.| 20| message | [ResourceStr](ts-types.md#resourcestr) | Yes | Content of the dialog box.| 21| autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked.<br>Default value: **true**| 22| confirm | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>fontColor?: [ResourceColor](ts-types.md#resourcecolor),<br>backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),<br>action: () => void<br>} | No | Text content, text color, background color, and click callback of the confirm button.| 23| cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked.| 24| alignment | [DialogAlignment](#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**| 25| offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.| 26| gridCount | number | No | Number of grid columns occupied by the width of the dialog box.| 27 28## AlertDialogParamWithButtons 29| Name | Type | Mandatory | Description | 30| --------------- | ---------------------- | ------------ | --------------------- | 31| title | [ResourceStr](ts-types.md#resourcestr) | No | Title of the dialog box. | 32| message | [ResourceStr](ts-types.md#resourcestr) | Yes | Content of the dialog box. | 33| autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked.<br>Default value: **true** | 34| primaryButton | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>fontColor?: [ResourceColor](ts-types.md#resourcecolor),<br>backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),<br>action: () => void;<br>} | No| Text content, text color, background color, and click callback of the primary button.| 35| secondaryButton | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>fontColor?: [ResourceColor](ts-types.md#resourcecolor),<br>backgroundColor?: [ResourceColor](ts-types.md#resourcecolor),<br>action: () => void;<br>} | No | Text content, text color, background color, and click callback of the primary button.| 36| cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked. | 37| alignment | [DialogAlignment](#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**| 38| offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.| 39| gridCount | number | No | Number of grid columns occupied by the width of the dialog box.| 40 41## DialogAlignment 42 43| Name | Description | 44| ------------------------ | ------- | 45| Top | Vertical top alignment.| 46| Center | Vertical center alignment.| 47| Bottom | Vertical bottom alignment.| 48| Default | Default alignment. | 49| TopStart<sup>8+</sup> | Top left alignment. | 50| TopEnd<sup>8+</sup> | Top right alignment. | 51| CenterStart<sup>8+</sup> | Center left alignment. | 52| CenterEnd<sup>8+</sup> | Center right alignment. | 53| BottomStart<sup>8+</sup> | Bottom left alignment. | 54| BottomEnd<sup>8+</sup> | Bottom right alignment. | 55 56## Example 57 58```ts 59// xxx.ets 60@Entry 61@Component 62struct AlertDialogExample { 63 build() { 64 Column({ space: 5 }) { 65 Button('one button dialog') 66 .onClick(() => { 67 AlertDialog.show( 68 { 69 title: 'title', 70 message: 'text', 71 autoCancel: true, 72 alignment: DialogAlignment.Bottom, 73 offset: { dx: 0, dy: -20 }, 74 gridCount: 3, 75 confirm: { 76 value: 'button', 77 action: () => { 78 console.info('Button-clicking callback') 79 } 80 }, 81 cancel: () => { 82 console.info('Closed callbacks') 83 } 84 } 85 ) 86 }) 87 .backgroundColor(0x317aff) 88 Button('two button dialog') 89 .onClick(() => { 90 AlertDialog.show( 91 { 92 title: 'title', 93 message: 'text', 94 autoCancel: true, 95 alignment: DialogAlignment.Bottom, 96 gridCount: 4, 97 offset: { dx: 0, dy: -20 }, 98 primaryButton: { 99 value: 'cancel', 100 action: () => { 101 console.info('Callback when the first button is clicked') 102 } 103 }, 104 secondaryButton: { 105 value: 'ok', 106 action: () => { 107 console.info('Callback when the second button is clicked') 108 } 109 }, 110 cancel: () => { 111 console.info('Closed callbacks') 112 } 113 } 114 ) 115 }).backgroundColor(0x317aff) 116 }.width('100%').margin({ top: 5 }) 117 } 118} 119``` 120 121 122
