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-universal-attributes-size.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>Default value: **-1**<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 199> **NOTE** 200> 201> 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. 202 203## PopoverOptions<sup>14+</sup> 204 205Defines a set of options used to configure the popover dialog box, including its content and position. 206 207Inherits [CustomPopupOptions](../arkui-ts/ts-universal-attributes-popup.md#custompopupoptions8). 208 209> **NOTE** 210> 211> The default value of **radius** is **32vp**. 212 213**Atomic service API**: This API can be used in atomic services since API version 14. 214 215**System capability**: SystemCapability.ArkUI.ArkUI.Full 216 217## Events 218 219The [universal events](ts-universal-events-click.md) are not supported. 220 221## Example 222 223### Example 1: Dialog Box with an Image Above Text 224This example implements a dialog box with an image above the text content, through the use of **imageRes**, **content**, and other properties. 225 226```ts 227import { TipsDialog } from '@kit.ArkUI'; 228import { image } from '@kit.ImageKit'; 229 230@Entry 231@Component 232struct Index { 233 @State pixelMap: PixelMap | undefined = undefined; 234 isChecked = false; 235 dialogControllerImage: CustomDialogController = new CustomDialogController({ 236 builder: TipsDialog({ 237 imageRes: $r('sys.media.ohos_ic_public_voice'), 238 content: 'Delete this app?', 239 primaryButton: { 240 value: 'Cancel', 241 action: () => { 242 console.info('Callback when the first button is clicked') 243 }, 244 }, 245 secondaryButton: { 246 value: 'Delete', 247 role: ButtonRole.ERROR, 248 action: () => { 249 console.info('Callback when the second button is clicked') 250 } 251 }, 252 onCheckedChange: () => { 253 console.info('Callback when the checkbox is clicked') 254 } 255 }), 256 }) 257 258 build() { 259 Row() { 260 Stack() { 261 Column(){ 262 Button ("Text Below Image") 263 .width(96) 264 .height(40) 265 .onClick(() => { 266 this.dialogControllerImage.open() 267 }) 268 }.margin({bottom: 300}) 269 }.align(Alignment.Bottom) 270 .width('100%').height('100%') 271 } 272 .backgroundImageSize({ width: '100%', height: '100%' }) 273 .height('100%') 274 } 275 276 aboutToAppear(): void { 277 this.getPixmapFromMedia($r('app.media.app_icon')); 278 } 279 280 async getPixmapFromMedia(resource: Resource) { 281 let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({ 282 bundleName: resource.bundleName, 283 moduleName: resource.moduleName, 284 id: resource.id 285 }) 286 let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength)) 287 this.pixelMap = await imageSource.createPixelMap({ 288 desiredPixelFormat: image.PixelMapFormat.RGBA_8888 289 }) 290 await imageSource.release() 291 return this.pixelMap; 292 } 293} 294``` 295 296 297 298### Example 2: List-only Dialog Box 299This example presents a dialog box consisting solely of a list defined with **selectedIndex** and **radioContent**. 300 301```ts 302import { SelectDialog } from '@kit.ArkUI' 303 304@Entry 305@Component 306struct Index { 307 radioIndex = 0; 308 dialogControllerList: CustomDialogController = new CustomDialogController({ 309 builder: SelectDialog({ 310 title:'Title', 311 selectedIndex: this.radioIndex, 312 confirm: { 313 value: 'Cancel', 314 action: () => {}, 315 }, 316 radioContent: [ 317 { 318 title: 'List item', 319 action: () => { 320 this.radioIndex = 0 321 } 322 }, 323 { 324 title: 'List item', 325 action: () => { 326 this.radioIndex = 1 327 } 328 }, 329 { 330 title: 'List item', 331 action: () => { 332 this.radioIndex = 2 333 } 334 }, 335 ] 336 }), 337 }) 338 339 build() { 340 Row() { 341 Stack() { 342 Column() { 343 Button("List Dialog Box") 344 .width(96) 345 .height(40) 346 .onClick(() => { 347 this.dialogControllerList.open() 348 }) 349 }.margin({ bottom: 300 }) 350 }.align(Alignment.Bottom) 351 .width('100%').height('100%') 352 } 353 .backgroundImageSize({ width: '100%', height: '100%' }) 354 .height('100%') 355 } 356} 357``` 358 359 360 361### Example 3: Dialog Box with Text and Check Boxes 362This example illustrates a dialog box that combines text content with check boxes defined with **content** and **checkTips**. 363 364```ts 365import { ConfirmDialog } from '@kit.ArkUI' 366 367@Entry 368@Component 369struct Index { 370 isChecked = false; 371 dialogControllerCheckBox: CustomDialogController = new CustomDialogController({ 372 builder: ConfirmDialog({ 373 title:'Title', 374 content: 'This is where content is displayed. This is where content is displayed.', 375 isChecked: this.isChecked, 376 checkTips: 'Don't ask again after denying', 377 primaryButton: { 378 value: 'Deny', 379 action: () => {}, 380 }, 381 secondaryButton: { 382 value: 'Allow', 383 action: () => { 384 this.isChecked = false 385 console.info('Callback when the second button is clicked') 386 } 387 }, 388 onCheckedChange: () => { 389 console.info('Callback when the checkbox is clicked') 390 }, 391 }), 392 autoCancel: true, 393 alignment: DialogAlignment.Bottom 394 }) 395 396 build() { 397 Row() { 398 Stack() { 399 Column(){ 400 Button("Text + Check Box Dialog Box") 401 .width(96) 402 .height(40) 403 .onClick(() => { 404 this.dialogControllerCheckBox.open() 405 }) 406 }.margin({bottom: 300}) 407 }.align(Alignment.Bottom) 408 .width('100%').height('100%') 409 } 410 .backgroundImageSize({ width: '100%', height: '100%' }) 411 .height('100%') 412 } 413} 414``` 415 416 417 418### Example 4: Text-only Dialog Box 419This example demonstrates a simple text-only dialog box defined with **primaryTitle**, **secondaryTitle**, and **content**. 420 421```ts 422import { AlertDialog } from '@kit.ArkUI' 423 424@Entry 425@Component 426struct Index { 427 dialogControllerConfirm: CustomDialogController = new CustomDialogController({ 428 builder: AlertDialog({ 429 primaryTitle: 'Primary title', 430 secondaryTitle: 'Secondary title', 431 content: 'This is where content is displayed.', 432 primaryButton: { 433 value: 'Cancel', 434 action: () => { 435 }, 436 }, 437 secondaryButton: { 438 value: 'OK', 439 role: ButtonRole.ERROR, 440 action: () => { 441 console.info('Callback when the second button is clicked') 442 } 443 }, 444 }), 445 }) 446 447 build() { 448 Row() { 449 Stack() { 450 Column() { 451 Button("Text Dialog Box") 452 .width(96) 453 .height(40) 454 .onClick(() => { 455 this.dialogControllerConfirm.open() 456 }) 457 }.margin({ bottom: 300 }) 458 }.align(Alignment.Bottom) 459 .width('100%').height('100%') 460 } 461 .backgroundImageSize({ width: '100%', height: '100%' }) 462 .height('100%') 463 } 464} 465``` 466 467 468 469### Example 5: Loading Dialog Box 470This example implements a loading dialog box that contains a progress indicator. 471 472```ts 473import { LoadingDialog } from '@kit.ArkUI' 474 475@Entry 476@Component 477struct Index { 478 dialogControllerProgress: CustomDialogController = new CustomDialogController({ 479 builder: LoadingDialog({ 480 content: 'This is where content is displayed.', 481 }), 482 }) 483 484 build() { 485 Row() { 486 Stack() { 487 Column() { 488 Button("Progress Dialog Box") 489 .width(96) 490 .height(40) 491 .onClick(() => { 492 this.dialogControllerProgress.open() 493 }) 494 }.margin({ bottom: 300 }) 495 }.align(Alignment.Bottom) 496 .width('100%').height('100%') 497 } 498 .backgroundImageSize({ width: '100%', height: '100%' }) 499 .height('100%') 500 } 501} 502``` 503 504 505 506### Example 6: Dialog Box with a Custom Theme 507This example presents a dialog box with a custom theme, through the use of **content**, **theme**, and other properties. 508 509```ts 510import { CustomColors, CustomTheme, LoadingDialog } from '@kit.ArkUI' 511 512class CustomThemeImpl implements CustomTheme { 513 colors?: CustomColors; 514 515 constructor(colors: CustomColors) { 516 this.colors = colors; 517 } 518} 519 520class CustomThemeColors implements CustomColors { 521 fontPrimary = '#ffd0a300'; 522 iconSecondary = '#ffd000cd'; 523} 524 525@Entry 526@Component 527struct Index { 528 @State customTheme: CustomTheme = new CustomThemeImpl(new CustomThemeColors()); 529 dialogController: CustomDialogController = new CustomDialogController({ 530 builder: LoadingDialog({ 531 content: 'text', 532 theme: this.customTheme, 533 }) 534 }); 535 536 build() { 537 Row() { 538 Stack() { 539 Column() { 540 Button('dialog') 541 .width(96) 542 .height(40) 543 .onClick(() => { 544 this.dialogController.open(); 545 }) 546 }.margin({ bottom: 300 }) 547 }.align(Alignment.Bottom) 548 .width('100%').height('100%') 549 } 550 .backgroundImageSize({ width: '100%', height: '100%' }) 551 .height('100%') 552 } 553} 554``` 555 556 557 558### Example 7: Dialog Box in Custom Color Mode 559This example presents a dialog box in the specified light or dark mode, through the use of **content**, **themeColorMode**, and other properties. 560 561```ts 562import { LoadingDialog } from '@kit.ArkUI' 563 564@Entry 565@Component 566struct Index { 567 dialogController: CustomDialogController = new CustomDialogController({ 568 builder: LoadingDialog({ 569 content: 'Text', 570 themeColorMode: ThemeColorMode.DARK, // Set the color mode to dark mode. 571 }) 572 }); 573 574 build() { 575 Row() { 576 Stack() { 577 Column() { 578 Button('Dialog') 579 .width(96) 580 .height(40) 581 .onClick(() => { 582 this.dialogController.open(); 583 }) 584 }.margin({ bottom: 300 }) 585 }.align(Alignment.Bottom) 586 .width('100%').height('100%') 587 } 588 .backgroundImageSize({ width: '100%', height: '100%' }) 589 .height('100%') 590 } 591} 592``` 593 594 595 596### Example 8: Dialog Box with Custom Content 597This example implements a dialog box with custom content defined with **contentBuilder** and **buttons**. 598 599```ts 600import { CustomContentDialog } from '@kit.ArkUI' 601 602@Entry 603@Component 604struct Index { 605 dialogController: CustomDialogController = new CustomDialogController({ 606 builder: CustomContentDialog({ 607 primaryTitle: 'Primary title', 608 secondaryTitle: 'Secondary title', 609 contentBuilder: () => { 610 this.buildContent(); 611 }, 612 buttons: [{ value: 'Button 1', buttonStyle: ButtonStyleMode.TEXTUAL, action: () => { 613 console.info('Callback when the button is clicked') 614 } }, { value: 'Button 2', buttonStyle: ButtonStyleMode.TEXTUAL, role: ButtonRole.ERROR }], 615 }), 616 }); 617 618 build() { 619 Column() { 620 Button("Dialog Box with Custom Content") 621 .onClick(() => { 622 this.dialogController.open() 623 }) 624 } 625 .width('100%') 626 .height('100%') 627 .justifyContent(FlexAlign.Center) 628 } 629 630 @Builder 631 buildContent(): void { 632 Column() { 633 Text('Content area') 634 } 635 } 636} 637``` 638 639 640 641### Example 9: Popover Dialog Box 642This example demonstrates a popover dialog box for alert purposes, through the use of **visible**, **popover**, **targetBuilder**, and other properties. 643 644```ts 645import { AlertDialog, PopoverDialog, PopoverOptions } from '@kit.ArkUI'; 646 647@Entry 648@Component 649struct Index { 650 @State isShow: boolean = false; 651 @State popoverOptions: PopoverOptions = { 652 builder: () => { 653 this.dialogBuilder(); 654 } 655 } 656 657 @Builder dialogBuilder() { 658 AlertDialog({ 659 content: 'Popover dialog box', 660 primaryButton: { 661 value: 'Cancel', 662 action: () => { 663 this.isShow = false; 664 }, 665 }, 666 secondaryButton: { 667 value: 'OK', 668 action: () => { 669 this.isShow = false; 670 }, 671 }, 672 }); 673 } 674 675 @Builder buttonBuilder() { 676 Button('Target Component').onClick(() => { 677 this.isShow = true; 678 }); 679 } 680 681 build() { 682 Column() { 683 PopoverDialog({ 684 visible: this.isShow, 685 popover: this.popoverOptions, 686 targetBuilder: () => { 687 this.buttonBuilder(); 688 }, 689 }) 690 } 691 } 692} 693``` 694 695 696
