1# Dialog Box (Dialog) 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, CustomContentDialog } from '@kit.ArkUI' 16``` 17 18 19## Child Components 20 21Not supported 22 23## Attributes 24 25The [universal attributes](ts-component-general-attributes.md) are not supported. 26 27## TipsDialog 28 29 30TipsDialog({controller: CustomDialogController, imageRes: Resource, imageSize?: SizeOptions, title?: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, checkAction?: (isChecked: boolean) => void, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) 31 32 33Displays an image-attached confirmation dialog box. If necessary, the confirmation dialog box can be displayed in a graphical manner. 34 35 36**Decorator type**: @CustomDialog 37 38 39**System capability**: SystemCapability.ArkUI.ArkUI.Full 40 41| Name | Type | Mandatory| Decorator| Description | 42| ----------------------------- | ------------------------------------------------------------ | ---- | ---------- | ------------------------------------------------------------ | 43| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes| - | Dialog box controller.<br>**NOTE**<br>If not decorated by @Require, this parameter is not subject to mandatory validation during construction.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 44| imageRes | [ResourceStr<sup>12+</sup>](ts-types.md#resourcestr) \| [PixelMap<sup>12+</sup>](../../apis-image-kit/js-apis-image.md#pixelmap7) | Yes | - | Image to be displayed.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 45| imageSize | [SizeOptions](ts-types.md#sizeoptions) | No | - | Image size.<br>Default value: **64*64vp**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 46| 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.| 47| content | [ResourceStr](ts-types.md#resourcestr) | No | - | Content of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 48| checkTips | [ResourceStr](ts-types.md#resourcestr) | No | - | Content of the check box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 49| 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**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 50| checkAction<sup>12+</sup> | (isChecked: boolean) => void | No | - | Event triggered when the selected status of the check box changes. You are advised to use **onCheckedChange<sup>12+</sup>** instead.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 51| onCheckedChange<sup>12+</sup> | Callback\<boolean> | No | - | Event triggered when the selected status of the check box changes.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 52| primaryButton | [ButtonOptions](#buttonoptions) | No | - | Left button of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 53| secondaryButton | [ButtonOptions](#buttonoptions) | No | - | Right button of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 54| theme<sup>12+</sup> | [Theme](../js-apis-arkui-theme.md#theme) \| [CustomTheme](../js-apis-arkui-theme.md#customtheme) | No | - | Theme information, which can be a custom theme or a **Theme** instance obtained from **onWillApplyTheme**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 55| themeColorMode<sup>12+</sup> | [ThemeColorMode](ts-container-with-theme.md#themecolormode10) | No| - | Theme color mode of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 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| Name | Type | Mandatory| Description | 68| ------------------- | ------------------------------------------------------------ | ---- |-------------------------------------------------------------------------------------------------------------------------| 69| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes| Dialog box controller.<br>**NOTE**<br>If not decorated by @Require, this parameter is not subject to mandatory validation during construction.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 70| title | [ResourceStr](ts-types.md#resourcestr) | Yes | Title of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 71| content | [ResourceStr](ts-types.md#resourcestr) | No | Content of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 72| selectedIndex | number | No | Index of the selected option in the dialog box.<br>Value range: an integer no less than -1<br>The default value is **-1**, indicating that there is no selected option. Values less than -1 are treated as no selected option.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 73| confirm | [ButtonOptions](#buttonoptions) | No | Button at the bottom of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 74| 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.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 75| theme<sup>12+</sup> | [Theme](../js-apis-arkui-theme.md#theme) \| [CustomTheme](../js-apis-arkui-theme.md#customtheme) | No | Theme information, which can be a custom theme or a **Theme** instance obtained from **onWillApplyTheme**.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 76| themeColorMode<sup>12+</sup> | [ThemeColorMode](ts-container-with-theme.md#themecolormode10) | No| Theme color mode of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 77 78## ConfirmDialog 79 80ConfirmDialog({controller: CustomDialogController, title: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) 81 82Displays 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). 83 84**Decorator type**: @CustomDialog 85 86**System capability**: SystemCapability.ArkUI.ArkUI.Full 87 88| Name | Type | Mandatory| Decorator| Description | 89| ----------------------------- | ------------------------------------------------------------ | ---- | ---------- | ------------------------------------------------------------ | 90| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes| - | Controller of the dialog box.<br>**NOTE**<br>If not decorated by @Require, this parameter is not subject to mandatory validation during construction.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 91| title | [ResourceStr](ts-types.md#resourcestr) | Yes | - | Title of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 92| content | [ResourceStr](ts-types.md#resourcestr) | No | - | Content of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 93| checkTips | [ResourceStr](ts-types.md#resourcestr) | No | - | Content of the check box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 94| 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**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 95| onCheckedChange<sup>12+</sup> | Callback\<boolean> | No | - | Event triggered when the selected status of the check box changes.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 96| primaryButton | [ButtonOptions](#buttonoptions) | No | - | Left button of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 97| secondaryButton | [ButtonOptions](#buttonoptions) | No | - | Right button of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 98| theme<sup>12+</sup> | [Theme](../js-apis-arkui-theme.md#theme)\| [CustomTheme](../js-apis-arkui-theme.md#customtheme) | No | - | Theme information, which can be a custom theme or a **Theme** instance obtained from **onWillApplyTheme**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 99| themeColorMode<sup>12+</sup> | [ThemeColorMode](ts-container-with-theme.md#themecolormode10) | No| - | Theme color mode of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 100 101 102## AlertDialog 103 104AlertDialog({controller: CustomDialogController, primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, 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| Name | Type | Mandatory| Description | 113| ---------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 114| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes| Controller of the dialog box.<br>**NOTE**<br>If not decorated by @Require, this parameter is not subject to mandatory validation during construction.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 115| primaryTitle<sup>12+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Primary title of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 116| secondaryTitle<sup>12+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Secondary title of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 117| content | [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.| 118| primaryButton | [ButtonOptions](#buttonoptions) | No | Left button of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 119| secondaryButton | [ButtonOptions](#buttonoptions) | No | Right button of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 120| theme<sup>12+</sup> | [Theme](../js-apis-arkui-theme.md#theme) \| [CustomTheme](../js-apis-arkui-theme.md#customtheme) | No | Theme information, which can be a custom theme or a **Theme** instance obtained from **onWillApplyTheme**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 121| themeColorMode<sup>12+</sup> | [ThemeColorMode](ts-container-with-theme.md#themecolormode10) | No| Theme color mode of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 122 123 124## LoadingDialog 125 126LoadingDialog({controller: CustomDialogController, content?: ResourceStr}) 127 128Displays a loading dialog box to inform the user of the operation progress. 129 130**Decorator type**: @CustomDialog 131 132**System capability**: SystemCapability.ArkUI.ArkUI.Full 133 134| Name | Type | Mandatory| Description | 135| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 136| Controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes| Controller of the dialog box.<br>**NOTE**<br>If not decorated by @Require, this parameter is not subject to mandatory validation during construction.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 137| content | [ResourceStr](ts-types.md#resourcestr) | No | Content of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 138| theme<sup>12+</sup> | [Theme](../js-apis-arkui-theme.md#theme)\| [CustomTheme](../js-apis-arkui-theme.md#customtheme) | No | Theme information, which can be a custom theme or a **Theme** instance obtained from **onWillApplyTheme**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 139| themeColorMode<sup>12+</sup> | [ThemeColorMode](ts-container-with-theme.md#themecolormode10) | No| Theme color mode of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 140 141 142## CustomContentDialog<sup>12+</sup> 143 144CustomContentDialog({controller: CustomDialogController, contentBuilder: () => void, primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, contentAreaPadding?: Padding, buttons?: ButtonOptions[]}) 145 146Displays a dialog box that contains custom content and operation area. 147 148**Decorator type**: @CustomDialog 149 150**Atomic service API**: This API can be used in atomic services since API version 12. 151 152**System capability**: SystemCapability.ArkUI.ArkUI.Full 153 154| Name | Type | Mandatory| Decorator| Description | 155| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | 156| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes| - | Controller of the dialog box.<br>**NOTE**<br>If not decorated by @Require, this parameter is not subject to mandatory validation during construction. | 157| contentBuilder | () => void | Yes | @BuilderParam | Content of the dialog box. | 158| primaryTitle | [ResourceStr](ts-types.md#resourcestr) | No | - | Primary title of the dialog box. | 159| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | No | - | Secondary title of the dialog box. | 160| localizedContentAreaPadding | [LocalizedPadding](ts-types.md#localizedpadding12) | No | - | Padding of the content area of the dialog box. | 161| contentAreaPadding | [Padding](ts-types.md#padding) | No | - | Padding of the content area of the dialog box. This attribute does not take effect when **localizedContentAreaPadding** is set.| 162| buttons | [ButtonOptions](#buttonoptions)[] | No | - | Buttons in the operation area of the dialog box. A maximum of four buttons are allowed. | 163| theme | [Theme](../js-apis-arkui-theme.md#theme) \| [CustomTheme](../js-apis-arkui-theme.md#customtheme) | No | - | Theme information, which can be a custom theme or a **Theme** instance obtained from **onWillApplyTheme**.| 164| themeColorMode | [ThemeColorMode](ts-container-with-theme.md#themecolormode10) | No| - | Theme color mode of the dialog box.| 165 166 167## PopoverDialog<sup>14+</sup> 168 169PopoverDialog({visible: boolean, popover: PopoverOptions, targetBuilder: Callback\<void>}) 170 171Displays a popover dialog box that is positioned relative to the target component. This dialog box can contain a variety of content types, including: TipsDialog, SelectDialog, ConfirmDialog, AlertDialog, LoadingDialog, and CustomContentDialog. 172 173**Decorator**: \@Component 174 175**Atomic service API**: This API can be used in atomic services since API version 14. 176 177**System capability**: SystemCapability.ArkUI.ArkUI.Full 178 179| Name| Type| Mandatory| Decorator| Description| 180| -------- | -------- | -------- | -------- | -------- | 181| visible | boolean | Yes| \@Link | Whether the popover dialog box is visible.<br>Default value: **false**, indicating that the popover dialog box is hidden| 182| popover | [PopoverOptions](#popoveroptions14) | Yes| \@Prop<br>\@Require | Options of the popover dialog box.| 183| targetBuilder | Callback\<void> | Yes| \@Require<br>\@BuilderParam | Target component relative to which the popover dialog box is positioned.| 184 185 186## ButtonOptions 187 188**System capability**: SystemCapability.ArkUI.ArkUI.Full 189 190| Name | Type | Mandatory| Description | 191| ------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 192| value | [ResourceStr](ts-types.md#resourcestr) | Yes | Content of the button.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 193| action | () => void | No | Click event of the button.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 194| background | [ResourceColor](ts-types.md#resourcecolor) | No | Background of the button.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 195| fontColor | [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.| 196| buttonStyle<sup>12+</sup> | [ButtonStyleMode](ts-basic-components-button.md#buttonstylemode11) | No | Style of the button.<br>Default value: **ButtonStyleMode.NORMAL** for 2-in-1 devices and **ButtonStyleMode.TEXTUAL** for other devices<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 197| role<sup>12+</sup> | [ButtonRole](ts-basic-components-button.md#buttonrole12) | No | Role of the button.<br>Default value: **ButtonRole.NORMAL**<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 198| defaultFocus<sup>18+</sup> | boolean | No | Whether the button gains focus by default.<br>Default value: **false**<br>**Atomic service API**: This API can be used in atomic services since API version 18. | 199 200> **NOTE** 201> 202> The priority of **buttonStyle** and **role** is higher than that of **fontColor** and **background**. If **buttonStyle** and **role** are at the default values, the settings of **fontColor** and **background** take effect. 203> If **defaultFocus** is set for multiple buttons, the default focus is the first button in the display order that has **defaultFocus** set to **true**. 204 205## PopoverOptions<sup>14+</sup> 206 207Defines a set of options used to configure the popover dialog box, including its content and position. 208 209Inherits [CustomPopupOptions](../arkui-ts/ts-universal-attributes-popup.md#custompopupoptions8). 210 211> **NOTE** 212> 213> The default value of **radius** is **32vp**. 214 215**Atomic service API**: This API can be used in atomic services since API version 14. 216 217**System capability**: SystemCapability.ArkUI.ArkUI.Full 218 219## Events 220 221The [universal events](ts-component-general-events.md) are not supported. 222 223## Example 224 225### Example 1: Dialog Box with an Image Above Text 226This example implements a dialog box with an image above the text content, through the use of **imageRes**, **content**, and other properties. 227 228```ts 229import { TipsDialog } from '@kit.ArkUI'; 230 231@Entry 232@Component 233struct Index { 234 dialogControllerImage: CustomDialogController = new CustomDialogController({ 235 builder: TipsDialog({ 236 imageRes: $r('sys.media.ohos_ic_public_voice'), 237 content: 'Delete this app?', 238 primaryButton: { 239 value: 'Cancel', 240 action: () => { 241 console.info('Callback when the first button is clicked') 242 }, 243 }, 244 secondaryButton: { 245 value: 'Delete', 246 role: ButtonRole.ERROR, 247 action: () => { 248 console.info('Callback when the second button is clicked') 249 } 250 }, 251 onCheckedChange: () => { 252 console.info('Callback when the checkbox is clicked') 253 } 254 }), 255 }) 256 257 build() { 258 Row() { 259 Stack() { 260 Column(){ 261 Button("Text Below Image") 262 .width(96) 263 .height(40) 264 .onClick(() => { 265 this.dialogControllerImage.open() 266 }) 267 }.margin({bottom: 300}) 268 }.align(Alignment.Bottom) 269 .width('100%').height('100%') 270 } 271 .backgroundImageSize({ width: '100%', height: '100%' }) 272 .height('100%') 273 } 274} 275``` 276 277 278 279### Example 2: List-only Dialog Box 280This example presents a dialog box consisting solely of a list defined with **selectedIndex** and **radioContent**. 281 282```ts 283import { SelectDialog } from '@kit.ArkUI' 284 285@Entry 286@Component 287struct Index { 288 // Set the index of the default selected option. 289 radioIndex = 0; 290 dialogControllerList: CustomDialogController = new CustomDialogController({ 291 builder: SelectDialog({ 292 title:'Title', 293 selectedIndex: this.radioIndex, 294 confirm: { 295 value: 'Cancel', 296 action: () => {}, 297 }, 298 radioContent: [ 299 { 300 title: 'List item', 301 action: () => { 302 this.radioIndex = 0 303 } 304 }, 305 { 306 title: 'List item', 307 action: () => { 308 this.radioIndex = 1 309 } 310 }, 311 { 312 title: 'List item', 313 action: () => { 314 this.radioIndex = 2 315 } 316 }, 317 ] 318 }), 319 }) 320 321 build() { 322 Row() { 323 Stack() { 324 Column() { 325 Button("List Dialog Box") 326 .width(96) 327 .height(40) 328 .onClick(() => { 329 this.dialogControllerList.open() 330 }) 331 }.margin({ bottom: 300 }) 332 } 333 .align(Alignment.Bottom) 334 .width('100%') 335 .height('100%') 336 } 337 .backgroundImageSize({ width: '100%', height: '100%' }) 338 .height('100%') 339 } 340} 341``` 342 343 344 345### Example 3: Dialog Box with Text and Check Boxes 346This example illustrates a dialog box that combines text content with check boxes defined with **content** and **checkTips**. 347 348```ts 349import { ConfirmDialog } from '@kit.ArkUI' 350 351@Entry 352@Component 353struct Index { 354 isChecked = false; 355 dialogControllerCheckBox: CustomDialogController = new CustomDialogController({ 356 builder: ConfirmDialog({ 357 title:'Title', 358 content: 'This is where content is displayed. This is where content is displayed.', 359 // Selected state of the check box 360 isChecked: this.isChecked, 361 // Content of the check box 362 checkTips: 'Don't ask again after denying', 363 primaryButton: { 364 value: 'Deny', 365 action: () => {}, 366 }, 367 secondaryButton: { 368 value: 'Allow', 369 action: () => { 370 this.isChecked = false 371 console.info('Callback when the second button is clicked') 372 } 373 }, 374 onCheckedChange: () => { 375 console.info('Callback when the checkbox is clicked') 376 }, 377 }), 378 autoCancel: true, 379 alignment: DialogAlignment.Bottom 380 }) 381 382 build() { 383 Row() { 384 Stack() { 385 Column(){ 386 Button("Text + Check Box Dialog Box") 387 .width(96) 388 .height(40) 389 .onClick(() => { 390 this.dialogControllerCheckBox.open() 391 }) 392 } 393 .margin({bottom: 300}) 394 } 395 .align(Alignment.Bottom) 396 .width('100%') 397 .height('100%') 398 } 399 .backgroundImageSize({ width: '100%', height: '100%' }) 400 .height('100%') 401 } 402} 403``` 404 405 406 407### Example 4: Text-only Dialog Box 408This example demonstrates a simple text-only dialog box defined with **primaryTitle**, **secondaryTitle**, and **content**. 409 410```ts 411import { AlertDialog } from '@kit.ArkUI' 412 413@Entry 414@Component 415struct Index { 416 dialogControllerConfirm: CustomDialogController = new CustomDialogController({ 417 builder: AlertDialog({ 418 primaryTitle: 'Primary title', 419 secondaryTitle: 'Secondary title', 420 content: 'This is where content is displayed.', 421 primaryButton: { 422 value: 'Cancel', 423 action: () => { 424 }, 425 }, 426 secondaryButton: { 427 value: 'OK', 428 role: ButtonRole.ERROR, 429 action: () => { 430 console.info('Callback when the second button is clicked') 431 } 432 }, 433 }), 434 }) 435 436 build() { 437 Row() { 438 Stack() { 439 Column() { 440 Button("Text Dialog Box") 441 .width(96) 442 .height(40) 443 .onClick(() => { 444 this.dialogControllerConfirm.open() 445 }) 446 } 447 .margin({ bottom: 300 }) 448 } 449 .align(Alignment.Bottom) 450 .width('100%') 451 .height('100%') 452 } 453 .backgroundImageSize({ width: '100%', height: '100%' }) 454 .height('100%') 455 } 456} 457``` 458 459 460 461### Example 5: Loading Dialog Box 462This example implements a loading dialog box that contains a progress indicator. 463 464```ts 465import { LoadingDialog } from '@kit.ArkUI' 466 467@Entry 468@Component 469struct Index { 470 dialogControllerProgress: CustomDialogController = new CustomDialogController({ 471 builder: LoadingDialog({ 472 content: 'This is where content is displayed.', 473 }), 474 }) 475 476 build() { 477 Row() { 478 Stack() { 479 Column() { 480 Button("Progress Dialog Box") 481 .width(96) 482 .height(40) 483 .onClick(() => { 484 this.dialogControllerProgress.open() 485 }) 486 } 487 .margin({ bottom: 300 }) 488 } 489 .align(Alignment.Bottom) 490 .width('100%') 491 .height('100%') 492 } 493 .backgroundImageSize({ width: '100%', height: '100%' }) 494 .height('100%') 495 } 496} 497``` 498 499 500 501### Example 6: Dialog Box with a Custom Theme 502This example presents a dialog box with a custom theme, through the use of **content**, **theme**, and other properties. 503 504```ts 505import { CustomColors, CustomTheme, LoadingDialog } from '@kit.ArkUI' 506 507class CustomThemeImpl implements CustomTheme { 508 colors?: CustomColors; 509 510 constructor(colors: CustomColors) { 511 this.colors = colors; 512 } 513} 514 515// Custom text content and colors for the dialog box theme 516class CustomThemeColors implements CustomColors { 517 fontPrimary = '#ffd0a300'; 518 iconSecondary = '#ffd000cd'; 519} 520 521@Entry 522@Component 523struct Index { 524 @State customTheme: CustomTheme = new CustomThemeImpl(new CustomThemeColors()); 525 dialogController: CustomDialogController = new CustomDialogController({ 526 builder: LoadingDialog({ 527 content: 'text', 528 theme: this.customTheme, 529 }) 530 }); 531 532 build() { 533 Row() { 534 Stack() { 535 Column() { 536 Button('dialog') 537 .width(96) 538 .height(40) 539 .onClick(() => { 540 this.dialogController.open(); 541 }) 542 } 543 .margin({ bottom: 300 }) 544 } 545 .align(Alignment.Bottom) 546 .width('100%') 547 .height('100%') 548 } 549 .backgroundImageSize({ width: '100%', height: '100%' }) 550 .height('100%') 551 } 552} 553``` 554 555 556 557### Example 7: Dialog Box in Custom Color Mode 558This example presents a dialog box in the specified light or dark mode, through the use of **content**, **themeColorMode**, and other properties. 559 560```ts 561import { LoadingDialog } from '@kit.ArkUI' 562 563@Entry 564@Component 565struct Index { 566 dialogController: CustomDialogController = new CustomDialogController({ 567 builder: LoadingDialog({ 568 content: 'Text', 569 themeColorMode: ThemeColorMode.DARK, // Set the color mode to dark mode. 570 }) 571 }); 572 573 build() { 574 Row() { 575 Stack() { 576 Column() { 577 Button('Dialog') 578 .width(96) 579 .height(40) 580 .onClick(() => { 581 this.dialogController.open(); 582 }) 583 } 584 .margin({ bottom: 300 }) 585 } 586 .align(Alignment.Bottom) 587 .width('100%') 588 .height('100%') 589 } 590 .backgroundImageSize({ width: '100%', height: '100%' }) 591 .height('100%') 592 } 593} 594``` 595 596 597 598### Example 8: Dialog Box with Custom Content 599This example implements a dialog box with custom content defined with **contentBuilder** and **buttons**. 600 601```ts 602import { CustomContentDialog } from '@kit.ArkUI' 603 604@Entry 605@Component 606struct Index { 607 dialogController: CustomDialogController = new CustomDialogController({ 608 builder: CustomContentDialog({ 609 primaryTitle: 'Primary title', 610 secondaryTitle: 'Secondary title', 611 contentBuilder: () => { 612 this.buildContent(); 613 }, 614 buttons: [ 615 { 616 value: 'Button 1', 617 buttonStyle: ButtonStyleMode.TEXTUAL, 618 action: () => { 619 console.info('Callback when the button is clicked') 620 } 621 }, 622 { 623 value: 'Button 2', 624 buttonStyle: ButtonStyleMode.TEXTUAL, 625 role: ButtonRole.ERROR 626 } 627 ], 628 }), 629 }); 630 631 build() { 632 Column() { 633 Button("Dialog Box with Custom Content") 634 .onClick(() => { 635 this.dialogController.open() 636 }) 637 } 638 .width('100%') 639 .height('100%') 640 .justifyContent(FlexAlign.Center) 641 } 642 643 // Custom content area of the dialog box 644 @Builder 645 buildContent(): void { 646 Column() { 647 Text('Content area') 648 } 649 .width('100%') 650 } 651} 652``` 653 654 655 656### Example 9: Popover Dialog Box 657This example demonstrates a popover dialog box for alert purposes, through the use of **visible**, **popover**, **targetBuilder**, and other properties. 658 659```ts 660import { AlertDialog, PopoverDialog, PopoverOptions } from '@kit.ArkUI'; 661 662@Entry 663@Component 664struct Index { 665 @State isShow: boolean = false; 666 @State popoverOptions: PopoverOptions = { 667 builder: () => { 668 this.dialogBuilder(); 669 }, 670 width: 320, 671 } 672 673 // Content of the popover dialog box 674 @Builder dialogBuilder() { 675 AlertDialog({ 676 content: 'Popover dialog box', 677 primaryButton: { 678 value: 'Cancel', 679 action: () => { 680 this.isShow = false; 681 }, 682 }, 683 secondaryButton: { 684 value: 'OK', 685 action: () => { 686 this.isShow = false; 687 }, 688 }, 689 }); 690 } 691 692 // Builder for the button that triggers the popover dialog box 693 @Builder buttonBuilder() { 694 Button('Target Component') 695 .onClick(() => { 696 this.isShow = true; 697 }); 698 } 699 700 build() { 701 Column() { 702 PopoverDialog({ 703 visible: this.isShow, 704 popover: this.popoverOptions, 705 targetBuilder: () => { 706 this.buttonBuilder(); 707 }, 708 }) 709 } 710 } 711} 712``` 713 714 715 716### Example 10: Setting the Default Focus Button for a Dialog Box 717This example demonstrates how to set a default focus button in a dialog box using **AlertDialog**, including the **defaultFocus** property. 718 719```ts 720import { AlertDialog } from '@kit.ArkUI' 721 722@Entry 723@Component 724struct Index { 725 dialogController: CustomDialogController = new CustomDialogController({ 726 builder: AlertDialog({ 727 primaryTitle: 'AlertDialog', 728 secondaryTitle: 'Subtitle', 729 content: 'The second button gains focus by default.', 730 primaryButton: { 731 value: 'DEFAULT', 732 action: () => {} 733 }, 734 secondaryButton: { 735 value: 'TRUE', 736 defaultFocus: true, // Set the button as the default focus button. 737 action: () => {} 738 }, 739 }) 740 }); 741 742 build() { 743 Row() { 744 Stack() { 745 Column() { 746 Button("AlertDialog") 747 .width(96) 748 .height(40) 749 .onClick(() => { 750 this.dialogController.open() 751 }) 752 } 753 .margin({ bottom: 300 }) 754 } 755 .align(Alignment.Bottom) 756 .width('100%') 757 .height('100%') 758 } 759 .backgroundImageSize({ width: '100%', height: '100%' }) 760 .height('100%') 761 } 762} 763``` 764 765
