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: ResourceStr | PixelMap, imageSize?: SizeOptions, title?: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, checkAction?: (isChecked: boolean) => void, onCheckedChange?: Callback\<boolean>, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions, theme?: Theme | CustomTheme, themeColorMode?: ThemeColorMode}) 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| - | 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. | 44| imageRes | [ResourceStr<sup>12+</sup>](ts-types.md#resourcestr) \| [PixelMap<sup>12+</sup>](../../apis-image-kit/arkts-apis-image-PixelMap.md) | 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> **NOTE**<br>If the title exceeds two lines, it will be truncated with an ellipsis (...).<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. **isChecked** indicates whether the check box is selected. The value **true** means the check box is selected, and **false** means the opposite. 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. The value **Callback\<true>** means the check box is selected, and **Callback\<false>** means the opposite.<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>, theme?: Theme | CustomTheme, themeColorMode?: ThemeColorMode}) 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| 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. | 70| title | [ResourceStr](ts-types.md#resourcestr) | Yes | Title of the dialog box.<br> **NOTE**<br>If the title exceeds two lines, it will be truncated with an ellipsis (...).<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, theme?: Theme | CustomTheme, themeColorMode?: ThemeColorMode}) 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>**NOTE**<br>If the title exceeds two lines, it will be truncated with an ellipsis (...).<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. The value **Callback\<true>** means the check box is selected, and **Callback\<false>** means the opposite.<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, theme?: Theme | CustomTheme, themeColorMode?: ThemeColorMode}) 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> **NOTE**<br>If the title exceeds two lines, it will be truncated with an ellipsis (...).<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> **NOTE**<br>If the title exceeds two lines, it will be truncated with an ellipsis (...).<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, theme?: Theme | CustomTheme, themeColorMode?: ThemeColorMode}) 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[], theme?: Theme | CustomTheme, themeColorMode?: ThemeColorMode}) 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.<br> **NOTE**<br>If the title exceeds two lines, it will be truncated with an ellipsis (...). | 159| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | No | - | Secondary title of the dialog box.<br> **NOTE**<br>If the title exceeds two lines, it will be truncated with an ellipsis (...). | 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> **NOTE** 167> 168> When the height of the dialog box is insufficient, the area defined by **contentBuilder** will be compressed. Global scrolling will be enabled if the compressed area's height falls below 100 vp. 169> 170> You must define scrolling of the content area in **CustomContentDialog**. In addition, the custom scrolling of the content area must be used in conjunction with the **nestedScroll** property, as in the **nestedScroll({ scrollForward: NestedScrollMode.PARALLEL, scrollBackward: NestedScrollMode.PARALLEL })** example. 171 172## PopoverDialog<sup>14+</sup> 173 174PopoverDialog({visible: boolean, popover: PopoverOptions, targetBuilder: Callback\<void>}) 175 176Displays 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. 177 178**Decorator**: \@Component 179 180**Atomic service API**: This API can be used in atomic services since API version 14. 181 182**System capability**: SystemCapability.ArkUI.ArkUI.Full 183 184| Name| Type| Mandatory| Decorator| Description| 185| -------- | -------- | -------- | -------- | -------- | 186| visible | boolean | Yes| \@Link | Whether the popover dialog box is visible. The value **true** means that the popover dialog box is displayed, and **false** means the opposite.<br>Default value: **false**.| 187| popover | [PopoverOptions](#popoveroptions14) | Yes| \@Prop<br>\@Require | Options of the popover dialog box.| 188| targetBuilder | Callback\<void> | Yes| \@Require<br>\@BuilderParam | Target component relative to which the popover dialog box is positioned.| 189 190 191## ButtonOptions 192 193**System capability**: SystemCapability.ArkUI.ArkUI.Full 194 195| Name | Type | Mandatory| Description | 196| ------------------------- | ------------------------------------------------------------ | ---- |--------------------------------------------------------------------------------------------------------------------------------| 197| 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. | 198| action | () => void | No | Click event of the button.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 199| 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. | 200| 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. | 201| 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.| 202| 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. | 203| defaultFocus<sup>18+</sup> | 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**.<br>**Atomic service API**: This API can be used in atomic services since API version 18. | 204 205> **NOTE** 206> 207> 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. 208> If **defaultFocus** is set for multiple buttons, the default focus is the first button in the display order that has **defaultFocus** set to **true**. 209 210## PopoverOptions<sup>14+</sup> 211 212Defines a set of options used to configure the popover dialog box, including its content and position. 213 214Inherits [CustomPopupOptions](../arkui-ts/ts-universal-attributes-popup.md#custompopupoptions8). 215 216> **NOTE** 217> 218> The default value of **radius** is **32vp**. 219 220**Atomic service API**: This API can be used in atomic services since API version 14. 221 222**System capability**: SystemCapability.ArkUI.ArkUI.Full 223 224## Events 225 226The [universal events](ts-component-general-events.md) are not supported. 227 228## Example 229 230### Example 1: Dialog Box with an Image Above Text 231This example implements a dialog box with an image above the text content, through the use of **imageRes**, **content**, and other properties. 232 233```ts 234import { TipsDialog } from '@kit.ArkUI'; 235 236@Entry 237@Component 238struct Index { 239 dialogControllerImage: CustomDialogController = new CustomDialogController({ 240 builder: TipsDialog({ 241 imageRes: $r('sys.media.ohos_ic_public_voice'), 242 content: 'Delete this app?', 243 primaryButton: { 244 value: 'Cancel', 245 action: () => { 246 console.info('Callback when the first button is clicked') 247 }, 248 }, 249 secondaryButton: { 250 value: 'Delete', 251 role: ButtonRole.ERROR, 252 action: () => { 253 console.info('Callback when the second button is clicked') 254 } 255 }, 256 onCheckedChange: () => { 257 console.info('Callback when the checkbox is clicked') 258 } 259 }), 260 }) 261 262 build() { 263 Row() { 264 Stack() { 265 Column(){ 266 Button("Text Below Image") 267 .width(96) 268 .height(40) 269 .onClick(() => { 270 this.dialogControllerImage.open() 271 }) 272 }.margin({bottom: 300}) 273 }.align(Alignment.Bottom) 274 .width('100%').height('100%') 275 } 276 .backgroundImageSize({ width: '100%', height: '100%' }) 277 .height('100%') 278 } 279} 280``` 281 282 283 284### Example 2: List-only Dialog Box 285This example presents a dialog box consisting solely of a list defined with **selectedIndex** and **radioContent**. 286 287```ts 288import { SelectDialog } from '@kit.ArkUI'; 289 290@Entry 291@Component 292struct Index { 293 // Set the index of the default selected option. 294 radioIndex = 0; 295 dialogControllerList: CustomDialogController = new CustomDialogController({ 296 builder: SelectDialog({ 297 title:'Title', 298 selectedIndex: this.radioIndex, 299 confirm: { 300 value: 'Cancel', 301 action: () => {}, 302 }, 303 radioContent: [ 304 { 305 title: 'List item', 306 action: () => { 307 this.radioIndex = 0 308 } 309 }, 310 { 311 title: 'List item', 312 action: () => { 313 this.radioIndex = 1 314 } 315 }, 316 { 317 title: 'List item', 318 action: () => { 319 this.radioIndex = 2 320 } 321 }, 322 ] 323 }), 324 }) 325 326 build() { 327 Row() { 328 Stack() { 329 Column() { 330 Button("List Dialog Box") 331 .width(96) 332 .height(40) 333 .onClick(() => { 334 this.dialogControllerList.open() 335 }) 336 }.margin({ bottom: 300 }) 337 } 338 .align(Alignment.Bottom) 339 .width('100%') 340 .height('100%') 341 } 342 .backgroundImageSize({ width: '100%', height: '100%' }) 343 .height('100%') 344 } 345} 346``` 347 348 349 350### Example 3: Dialog Box with Text and Check Boxes 351This example illustrates a dialog box that combines text content with check boxes defined with **content** and **checkTips**. 352 353```ts 354import { ConfirmDialog } from '@kit.ArkUI'; 355 356@Entry 357@Component 358struct Index { 359 isChecked = false; 360 dialogControllerCheckBox: CustomDialogController = new CustomDialogController({ 361 builder: ConfirmDialog({ 362 title:'Title', 363 content: 'This is where content is displayed. This is where content is displayed.', 364 // Selected state of the check box 365 isChecked: this.isChecked, 366 // Content of the check box 367 checkTips: 'Do not ask me again', 368 primaryButton: { 369 value: 'Deny', 370 action: () => {}, 371 }, 372 secondaryButton: { 373 value: 'Allow', 374 action: () => { 375 this.isChecked = false 376 console.info('Callback when the second button is clicked') 377 } 378 }, 379 onCheckedChange: () => { 380 console.info('Callback when the checkbox is clicked') 381 }, 382 }), 383 autoCancel: true, 384 alignment: DialogAlignment.Bottom 385 }) 386 387 build() { 388 Row() { 389 Stack() { 390 Column(){ 391 Button("Text + Check Box Dialog Box") 392 .width(96) 393 .height(40) 394 .onClick(() => { 395 this.dialogControllerCheckBox.open() 396 }) 397 } 398 .margin({bottom: 300}) 399 } 400 .align(Alignment.Bottom) 401 .width('100%') 402 .height('100%') 403 } 404 .backgroundImageSize({ width: '100%', height: '100%' }) 405 .height('100%') 406 } 407} 408``` 409 410 411 412### Example 4: Text-only Dialog Box 413This example demonstrates a simple text-only dialog box defined with **primaryTitle**, **secondaryTitle**, and **content**. 414 415```ts 416import { AlertDialog } from '@kit.ArkUI'; 417 418@Entry 419@Component 420struct Index { 421 dialogControllerConfirm: CustomDialogController = new CustomDialogController({ 422 builder: AlertDialog({ 423 primaryTitle: 'Primary title', 424 secondaryTitle: 'Secondary title', 425 content: 'This is where content is displayed.', 426 primaryButton: { 427 value: 'Cancel', 428 action: () => { 429 }, 430 }, 431 secondaryButton: { 432 value: 'OK', 433 role: ButtonRole.ERROR, 434 action: () => { 435 console.info('Callback when the second button is clicked') 436 } 437 }, 438 }), 439 }) 440 441 build() { 442 Row() { 443 Stack() { 444 Column() { 445 Button("Text Dialog Box") 446 .width(96) 447 .height(40) 448 .onClick(() => { 449 this.dialogControllerConfirm.open() 450 }) 451 } 452 .margin({ bottom: 300 }) 453 } 454 .align(Alignment.Bottom) 455 .width('100%') 456 .height('100%') 457 } 458 .backgroundImageSize({ width: '100%', height: '100%' }) 459 .height('100%') 460 } 461} 462``` 463 464 465 466### Example 5: Loading Dialog Box 467This example implements a loading dialog box that contains a progress indicator. 468 469```ts 470import { LoadingDialog } from '@kit.ArkUI'; 471 472@Entry 473@Component 474struct Index { 475 dialogControllerProgress: CustomDialogController = new CustomDialogController({ 476 builder: LoadingDialog({ 477 content: 'This is where content is displayed.', 478 }), 479 }) 480 481 build() { 482 Row() { 483 Stack() { 484 Column() { 485 Button("Progress Dialog Box") 486 .width(96) 487 .height(40) 488 .onClick(() => { 489 this.dialogControllerProgress.open() 490 }) 491 } 492 .margin({ bottom: 300 }) 493 } 494 .align(Alignment.Bottom) 495 .width('100%') 496 .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 520// Custom text content and colors for the dialog box theme 521class CustomThemeColors implements CustomColors { 522 fontPrimary = '#ffd0a300'; 523 iconSecondary = '#ffd000cd'; 524} 525 526@Entry 527@Component 528struct Index { 529 @State customTheme: CustomTheme = new CustomThemeImpl(new CustomThemeColors()); 530 dialogController: CustomDialogController = new CustomDialogController({ 531 builder: LoadingDialog({ 532 content: 'text', 533 theme: this.customTheme, 534 }) 535 }); 536 537 build() { 538 Row() { 539 Stack() { 540 Column() { 541 Button('dialog') 542 .width(96) 543 .height(40) 544 .onClick(() => { 545 this.dialogController.open(); 546 }) 547 } 548 .margin({ bottom: 300 }) 549 } 550 .align(Alignment.Bottom) 551 .width('100%') 552 .height('100%') 553 } 554 .backgroundImageSize({ width: '100%', height: '100%' }) 555 .height('100%') 556 } 557} 558``` 559 560 561 562### Example 7: Dialog Box in Custom Color Mode 563This example presents a dialog box in the specified light or dark mode, through the use of **content**, **themeColorMode**, and other properties. 564 565```ts 566import { LoadingDialog } from '@kit.ArkUI'; 567 568@Entry 569@Component 570struct Index { 571 dialogController: CustomDialogController = new CustomDialogController({ 572 builder: LoadingDialog({ 573 content: 'Text', 574 themeColorMode: ThemeColorMode.DARK, // Set the color mode to dark mode. 575 }) 576 }); 577 578 build() { 579 Row() { 580 Stack() { 581 Column() { 582 Button('Dialog') 583 .width(96) 584 .height(40) 585 .onClick(() => { 586 this.dialogController.open(); 587 }) 588 } 589 .margin({ bottom: 300 }) 590 } 591 .align(Alignment.Bottom) 592 .width('100%') 593 .height('100%') 594 } 595 .backgroundImageSize({ width: '100%', height: '100%' }) 596 .height('100%') 597 } 598} 599``` 600 601 602 603### Example 8: Dialog Box with Custom Content 604This example implements a dialog box with custom content defined with **contentBuilder** and **buttons**. 605 606```ts 607import { CustomContentDialog } from '@kit.ArkUI'; 608 609@Entry 610@Component 611struct Index { 612 dialogController: CustomDialogController = new CustomDialogController({ 613 builder: CustomContentDialog({ 614 primaryTitle: 'Primary title', 615 secondaryTitle: 'Secondary title', 616 contentBuilder: () => { 617 this.buildContent(); 618 }, 619 buttons: [ 620 { 621 value: 'Button 1', 622 buttonStyle: ButtonStyleMode.TEXTUAL, 623 action: () => { 624 console.info('Callback when the button is clicked') 625 } 626 }, 627 { 628 value: 'Button 2', 629 buttonStyle: ButtonStyleMode.TEXTUAL, 630 role: ButtonRole.ERROR 631 } 632 ], 633 }), 634 }); 635 636 build() { 637 Column() { 638 Button("Dialog Box with Custom Content") 639 .onClick(() => { 640 this.dialogController.open() 641 }) 642 } 643 .width('100%') 644 .height('100%') 645 .justifyContent(FlexAlign.Center) 646 } 647 648 // Custom content area of the dialog box 649 @Builder 650 buildContent(): void { 651 Column() { 652 Text('Content area') 653 } 654 .width('100%') 655 } 656} 657``` 658 659 660 661### Example 9: Popover Dialog Box 662This example demonstrates a popover dialog box for alert purposes, through the use of **visible**, **popover**, **targetBuilder**, and other properties. This functionality is supported since API version 14. 663 664```ts 665import { AlertDialog, PopoverDialog, PopoverOptions } from '@kit.ArkUI'; 666 667@Entry 668@Component 669struct Index { 670 @State isShow: boolean = false; 671 @State popoverOptions: PopoverOptions = { 672 builder: () => { 673 this.dialogBuilder(); 674 }, 675 width: 320, 676 } 677 678 // Content of the popover dialog box 679 @Builder dialogBuilder() { 680 AlertDialog({ 681 content: 'Popover dialog box', 682 primaryButton: { 683 value: 'Cancel', 684 action: () => { 685 this.isShow = false; 686 }, 687 }, 688 secondaryButton: { 689 value: 'OK', 690 action: () => { 691 this.isShow = false; 692 }, 693 }, 694 }); 695 } 696 697 // Builder for the button that triggers the popover dialog box 698 @Builder buttonBuilder() { 699 Button('Target Component') 700 .onClick(() => { 701 this.isShow = true; 702 }); 703 } 704 705 build() { 706 Column() { 707 PopoverDialog({ 708 visible: this.isShow, 709 popover: this.popoverOptions, 710 targetBuilder: () => { 711 this.buttonBuilder(); 712 }, 713 }) 714 } 715 } 716} 717``` 718 719 720 721### Example 10: Setting the Default Focus Button for a Dialog Box 722This example demonstrates how to set a default focus button in a dialog box using **AlertDialog**, including the **defaultFocus** property. This functionality is supported since API version 18. 723 724```ts 725import { AlertDialog } from '@kit.ArkUI'; 726 727@Entry 728@Component 729struct Index { 730 dialogController: CustomDialogController = new CustomDialogController({ 731 builder: AlertDialog({ 732 primaryTitle: 'AlertDialog', 733 secondaryTitle: 'Subtitle', 734 content: 'The second button gains focus by default.', 735 primaryButton: { 736 value: 'DEFAULT', 737 action: () => {} 738 }, 739 secondaryButton: { 740 value: 'TRUE', 741 defaultFocus: true, // Set the button as the default focus button. 742 action: () => {} 743 }, 744 }) 745 }); 746 747 build() { 748 Row() { 749 Stack() { 750 Column() { 751 Button("AlertDialog") 752 .width(96) 753 .height(40) 754 .onClick(() => { 755 this.dialogController.open() 756 }) 757 } 758 .margin({ bottom: 300 }) 759 } 760 .align(Alignment.Bottom) 761 .width('100%') 762 .height('100%') 763 } 764 .backgroundImageSize({ width: '100%', height: '100%' }) 765 .height('100%') 766 } 767} 768``` 769 770
