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