1# @ohos.arkui.advanced.Dialog (Dialog Box) 2 3 4The dialog box is a modal window that commands attention while retaining the current context. It is frequently used to draw the user's attention to vital information or prompt the user to complete a specific task. As all modal windows, this component requires the user to interact before exiting. 5 6 7> **NOTE** 8> 9> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 10 11 12## Modules to Import 13 14``` 15import { TipsDialog, SelectDialog, ConfirmDialog, AlertDialog, LoadingDialog } from '@ohos.arkui.advanced.Dialog' 16``` 17 18 19## Child Components 20 21Not supported 22 23## Attributes 24The [universal attributes](ts-universal-attributes-size.md) are not supported. 25 26## TipsDialog 27 28 29TipsDialog({controller: CustomDialogController, imageRes: Resource, imageSize: SizeOptions, title: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) 30 31 32Displays an image-attached confirmation dialog box. If necessary, the confirmation dialog box can be displayed in a graphical manner. 33 34 35**Decorator type**: @CustomDialog 36 37 38**System capability**: SystemCapability.ArkUI.ArkUI.Full 39 40 41**Parameters** 42 43 44| Name| Type| Mandatory| Decorator| Description| 45| -------- | -------- | -------- | -------- | -------- | 46| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes| - | Dialog box controller.| 47| imageRes | [Resource](ts-types.md#resource) | Yes| - | Image to be displayed.| 48| imageSize | [SizeOptions](ts-types.md#sizeoptions) | Yes| - | Image size.| 49| title | [ResourceStr](ts-types.md#resourcestr) | Yes| - | Title of the dialog box.| 50| content | [ResourceStr](ts-types.md#resourcestr) | No| - | Content of the dialog box.| 51| checkTips | [ResourceStr](ts-types.md#resourcestr) | No| - | Content of the check box.| 52| isChecked | boolean | No| \@Prop | Whether to select the check box. The value **true** means to select the checkbox , and **false** means the opposite.<br>Default value: **false**| 53| primaryButton | [ButtonOptions](#buttonoptions) | No| - | Left button of the dialog box.| 54| secondaryButton | [ButtonOptions](#buttonoptions) | No| - | Right button of the dialog box.| 55 56 57## SelectDialog 58 59SelectDialog({controller: CustomDialogController, title: ResourceStr, content?: ResourceStr, selectedIndex?: number, confirm?: ButtonOptions, radioContent: Array<SheetInfo>}) 60 61Displays a dialog box from which the user can select options presented in a list or grid. 62 63**Decorator type**: @CustomDialog 64 65**System capability**: SystemCapability.ArkUI.ArkUI.Full 66 67**Parameters** 68 69| Name| Type| Mandatory| Description| 70| -------- | -------- | -------- | -------- | 71| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes| Dialog box controller.| 72| title | [ResourceStr](ts-types.md#resourcestr) | Yes| Title of the dialog box.| 73| content | [ResourceStr](ts-types.md#resourcestr) | No| Content of the dialog box.| 74| selectedIndex | number | No| Index of the selected option in the dialog box.<br>Default value: **-1**| 75| confirm | [ButtonOptions](#buttonoptions) | No| Button at the bottom of the dialog box.| 76| radioContent | Array<[SheetInfo](ts-methods-action-sheet.md#sheetinfo)> | Yes| List of subitems in the dialog box. You can set text and a select callback for each subitem.| 77 78 79## ConfirmDialog 80 81ConfirmDialog({controller: CustomDialogController, title: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) 82 83Displays an error dialog box that informs the user of an operational error (for example, a network error or low battery level) or an incorrect operation (for example, fingerprint enrollment). 84 85**Decorator type**: @CustomDialog 86 87**System capability**: SystemCapability.ArkUI.ArkUI.Full 88 89**Parameters** 90 91| Name| Type| Mandatory| Decorator| Description| 92| -------- | -------- | -------- | -------- | -------- | 93| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes| - | Controller of the dialog box.| 94| title | [ResourceStr](ts-types.md#resourcestr) | Yes| - | Title of the dialog box.| 95| content | [ResourceStr](ts-types.md#resourcestr) | No| - | Content of the dialog box.| 96| checkTips | [ResourceStr](ts-types.md#resourcestr) | No| - | Content of the check box.| 97| isChecked | boolean | No| \@Prop | Whether to select the check box. The value **true** means to select the checkbox , and **false** means the opposite.<br>Default value: **false**| 98| primaryButton | [ButtonOptions](#buttonoptions) | No| - | Left button of the dialog box.| 99| secondaryButton | [ButtonOptions](#buttonoptions) | No| - | Right button of the dialog box.| 100 101 102## AlertDialog 103 104AlertDialog({controller: CustomDialogController, content: ResourceStr, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) 105 106Displays an alert dialog box to prompt the user to confirm an action that is irreversible and may cause serious consequences, such as deletion, reset, editing cancellation, and stop. 107 108**Decorator type**: @CustomDialog 109 110**System capability**: SystemCapability.ArkUI.ArkUI.Full 111 112**Parameters** 113 114| Name| Type| Mandatory| Description| 115| -------- | -------- | -------- | -------- | 116| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes| Controller of the dialog box.| 117| content | [ResourceStr](ts-types.md#resourcestr) | Yes| Content of the dialog box.| 118| primaryButton | [ButtonOptions](#buttonoptions) | No| Left button of the dialog box.| 119| secondaryButton | [ButtonOptions](#buttonoptions) | No| Right button of the dialog box.| 120 121 122## LoadingDialog 123 124LoadingDialog({controller: CustomDialogController, content?: ResourceStr}) 125 126Displays a loading dialog box to inform the user of the operation progress. 127 128**Decorator type**: @CustomDialog 129 130**System capability**: SystemCapability.ArkUI.ArkUI.Full 131 132**Parameters** 133 134| Name| Type| Mandatory| Description| 135| -------- | -------- | -------- | -------- | 136| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes| Controller of the dialog box.| 137| content | [ResourceStr](ts-types.md#resourcestr) | No| Content of the dialog box.| 138 139 140## ButtonOptions 141 142**System capability**: SystemCapability.ArkUI.ArkUI.Full 143 144| Name| Type| Mandatory| Description| 145| -------- | -------- | -------- | -------- | 146| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Content of the button.| 147| action | () => void | No| Click event of the button.| 148| background | [ResourceColor](ts-types.md#resourcecolor) | No| Background of the button.| 149| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No| Font color of the button.| 150 151 152## Events 153The [universal events](ts-universal-events-click.md) are not supported. 154 155## Example 156 157### Example 1 158 159```ts 160import { TipsDialog } from '@ohos.arkui.advanced.Dialog' 161@Entry 162@Component 163struct Index { 164 isChecked = false; 165 dialogControllerImage: CustomDialogController = new CustomDialogController({ 166 builder: TipsDialog({ 167 imageRes: $r('app.media.icon'), 168 imageSize: { width: 100, height: 100 }, 169 title:'Title', 170 content: 'This is where content is displayed.', 171 isChecked: this.isChecked, 172 checkTips:'Don't remind me again', 173 primaryButton: { 174 value: 'Cancel', 175 action: () => { 176 console.info('Callback when the CheckBox is clicked') 177 }, 178 }, 179 secondaryButton: { 180 value: 'OK', 181 action: () => { 182 console.info('Callback when the second button is clicked') 183 } 184 }, 185 }), 186 autoCancel: true, 187 customStyle: true, 188 alignment: DialogAlignment.Bottom 189 }) 190 191 build() { 192 Row() { 193 Stack() { 194 Column(){ 195 Button ("Text Below Image") 196 .width(96) 197 .height(40) 198 .onClick(() => { 199 this.dialogControllerImage.open() 200 }) 201 }.margin({bottom: 300}) 202 }.align(Alignment.Bottom) 203 .width('100%').height('100%') 204 } 205 .backgroundImageSize({ width: '100%', height: '100%' }) 206 .height('100%') 207 } 208} 209``` 210 211 212 213 214### Example 2 215 216```ts 217import { SelectDialog } from '@ohos.arkui.advanced.Dialog' 218@Entry 219@Component 220struct Index { 221 radioIndex = 0; 222 dialogControllerList: CustomDialogController = new CustomDialogController({ 223 builder: SelectDialog({ 224 title:'Title', 225 selectedIndex: this.radioIndex, 226 confirm: { 227 value: 'Cancel', 228 action: () => {}, 229 }, 230 radioContent: [ 231 { 232 title: 'List item', 233 action: () => { 234 this.radioIndex = 0 235 } 236 }, 237 { 238 title: 'List item', 239 action: () => { 240 this.radioIndex = 1 241 } 242 }, 243 { 244 title: 'List item', 245 action: () => { 246 this.radioIndex = 2 247 } 248 }, 249 ] 250 }), 251 customStyle: true, 252 alignment: DialogAlignment.Bottom, 253 autoCancel: false 254 }) 255 256 build() { 257 Row() { 258 Stack() { 259 Column() { 260 Button("List Dialog Box") 261 .width(96) 262 .height(40) 263 .onClick(() => { 264 this.dialogControllerList.open() 265 }) 266 }.margin({ bottom: 300 }) 267 }.align(Alignment.Bottom) 268 .width('100%').height('100%') 269 } 270 .backgroundImageSize({ width: '100%', height: '100%' }) 271 .height('100%') 272 } 273} 274``` 275 276 277 278 279### Example 3 280 281```ts 282import { ConfirmDialog } from '@ohos.arkui.advanced.Dialog' 283@Entry 284@Component 285struct Index { 286 isChecked = false; 287 dialogControllerCheckBox: CustomDialogController = new CustomDialogController({ 288 builder: ConfirmDialog({ 289 title:'Title', 290 content: 'This is where content is displayed. This is where content is displayed. ', 291 isChecked: this.isChecked, 292 checkTips:'Don't ask again after denying', 293 primaryButton: { 294 value: 'Deny', 295 action: () => {}, 296 }, 297 secondaryButton: { 298 value: 'Allow', 299 action: () => { 300 this.isChecked = false 301 console.info('Callback when the second button is clicked') 302 } 303 }, 304 }), 305 autoCancel: true, 306 customStyle: true, 307 alignment: DialogAlignment.Bottom 308 }) 309 310 build() { 311 Row() { 312 Stack() { 313 Column(){ 314 Button ("Text + Check Box Dialog Box") 315 .width(96) 316 .height(40) 317 .onClick(() => { 318 this.dialogControllerCheckBox.open() 319 }) 320 }.margin({bottom: 300}) 321 }.align(Alignment.Bottom) 322 .width('100%').height('100%') 323 } 324 .backgroundImageSize({ width: '100%', height: '100%' }) 325 .height('100%') 326 } 327} 328``` 329 330 331 332 333### Example 4 334 335```ts 336import { AlertDialog } from '@ohos.arkui.advanced.Dialog' 337@Entry 338@Component 339struct Index { 340 dialogControllerConfirm: CustomDialogController = new CustomDialogController({ 341 builder: AlertDialog({ 342 content: 'This is where content is displayed.', 343 primaryButton: { 344 value: 'Cancel', 345 action: () => {}, 346 }, 347 secondaryButton: { 348 value: 'OK', 349 fontColor: $r('sys.color.ohos_id_color_warning'), 350 action: () => { 351 console.info('Callback when the second button is clicked') 352 } 353 }, 354 }), 355 autoCancel: true, 356 customStyle: true, 357 alignment: DialogAlignment.Bottom 358 }) 359 360 build() { 361 Row() { 362 Stack() { 363 Column(){ 364 Button("Text Dialog Box") 365 .width(96) 366 .height(40) 367 .onClick(() => { 368 this.dialogControllerConfirm.open() 369 }) 370 }.margin({bottom: 300}) 371 }.align(Alignment.Bottom) 372 .width('100%').height('100%') 373 } 374 .backgroundImageSize({ width: '100%', height: '100%' }) 375 .height('100%') 376 } 377} 378``` 379 380 381 382 383### Example 5 384 385```ts 386import { LoadingDialog } from '@ohos.arkui.advanced.Dialog' 387@Entry 388@Component 389struct Index { 390 dialogControllerProgress: CustomDialogController = new CustomDialogController({ 391 builder: LoadingDialog({ 392 content: 'This is where content is displayed...', 393 }), 394 autoCancel: true, 395 customStyle: true, 396 alignment: DialogAlignment.Bottom 397 }) 398 399 build() { 400 Row() { 401 Stack() { 402 Column() { 403 Button ("Progress Dialog Box") 404 .width(96) 405 .height(40) 406 .onClick(() => { 407 this.dialogControllerProgress.open() 408 }) 409 }.margin({ bottom: 300 }) 410 }.align(Alignment.Bottom) 411 .width('100%').height('100%') 412 } 413 .backgroundImageSize({ width: '100%', height: '100%' }) 414 .height('100%') 415 } 416} 417``` 418 419 420
