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