1# 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**Parameters** 42 43| Name | Type | Mandatory| Decorator| Description | 44| ----------------------------- | ------------------------------------------------------------ | ---- | ---------- | ------------------------------------------------------------ | 45| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes | - | Dialog box controller.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 46| 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.| 47| 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.| 48| 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.| 49| 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.| 50| 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.| 51| 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.| 52| 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. | 53| 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. | 54| 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.| 55| 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.| 56| 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.| 57 58## SelectDialog 59 60SelectDialog({controller: CustomDialogController, title: ResourceStr, content?: ResourceStr, selectedIndex?: number, confirm?: ButtonOptions, radioContent: Array<SheetInfo>}) 61 62Displays a dialog box from which the user can select options presented in a list or grid. 63 64**Decorator type**: @CustomDialog 65 66**System capability**: SystemCapability.ArkUI.ArkUI.Full 67 68**Parameters** 69 70| Name | Type | Mandatory| Description | 71| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 72| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes | Dialog box controller.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 73| 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.| 74| 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.| 75| 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.| 76| 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.| 77| 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.| 78| 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.| 79 80## ConfirmDialog 81 82ConfirmDialog({controller: CustomDialogController, title: ResourceStr, content?: ResourceStr, checkTips?: ResourceStr, ischecked?: boolean, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) 83 84Displays 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). 85 86**Decorator type**: @CustomDialog 87 88**System capability**: SystemCapability.ArkUI.ArkUI.Full 89 90**Parameters** 91 92| Name | Type | Mandatory| Decorator| Description | 93| ----------------------------- | ------------------------------------------------------------ | ---- | ---------- | ------------------------------------------------------------ | 94| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes | - | Controller of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 95| 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.| 96| 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.| 97| 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.| 98| 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.| 99| onCheckedChange<sup>12+</sup> | Callback\<boolean> | No | - | Event indicating that the selected status of the check box changes.<br>**Atomic service API**: This API can be used in atomic services since API version 12. | 100| 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.| 101| 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.| 102| 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.| 103 104 105## AlertDialog 106 107AlertDialog({controller: CustomDialogController, primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, content: ResourceStr, primaryButton?: ButtonOptions, secondaryButton?: ButtonOptions}) 108 109Displays 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. 110 111**Decorator type**: @CustomDialog 112 113**System capability**: SystemCapability.ArkUI.ArkUI.Full 114 115**Parameters** 116 117| Name | Type | Mandatory| Description | 118| ---------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 119| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes | Controller of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 120| 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. | 121| 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. | 122| 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.| 123| 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.| 124| 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.| 125| 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.| 126 127 128## LoadingDialog 129 130LoadingDialog({controller: CustomDialogController, content?: ResourceStr}) 131 132Displays a loading dialog box to inform the user of the operation progress. 133 134**Decorator type**: @CustomDialog 135 136**System capability**: SystemCapability.ArkUI.ArkUI.Full 137 138**Parameters** 139 140| Name | Type | Mandatory| Description | 141| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 142| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes | Controller of the dialog box.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 143| 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.| 144| 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.| 145 146 147## CustomContentDialog<sup>12+</sup> 148 149CustomContentDialog({controller: CustomDialogController, contentBuilder: () => void, primaryTitle?: ResourceStr, secondaryTitle?: ResourceStr, contentAreaPadding?: Padding, buttons?: ButtonOptions[]}) 150 151Displays a dialog box that contains custom content and operation area. 152 153**Decorator type**: @CustomDialog 154 155**Atomic service API**: This API can be used in atomic services since API version 12. 156 157**System capability**: SystemCapability.ArkUI.ArkUI.Full 158 159**Parameters** 160 161| Name | Type | Mandatory| Description | 162| ------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 163| controller | [CustomDialogController](ts-methods-custom-dialog-box.md#customdialogcontroller) | Yes | Controller of the dialog box. | 164| contentBuilder | () => void | Yes | Content of the dialog box. | 165| primaryTitle | [ResourceStr](ts-types.md#resourcestr) | No | Primary title of the dialog box. | 166| secondaryTitle | [ResourceStr](ts-types.md#resourcestr) | No | Secondary title of the dialog box. | 167| localizedContentAreaPadding | [LocalizedPadding](ts-types.md#LocalizedPadding12) | No | Padding of the content area of the dialog box. | 168| 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.| 169| buttons | Array<[ButtonOptions](#buttonoptions)> | No | Buttons in the operation area of the dialog box. A maximum of four buttons are allowed. | 170| 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**.| 171 172 173## ButtonOptions 174 175**System capability**: SystemCapability.ArkUI.ArkUI.Full 176 177| Name | Type | Mandatory| Description | 178| ------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 179| 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.| 180| action | () => void | No | Click event of the button.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 181| 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.| 182| 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.| 183| 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.| 184| 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. | 185 186> **NOTE** 187> 188> 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. 189 190## Events 191 192The [universal events](ts-universal-events-click.md) are not supported. 193 194## Example 195 196### Example 1 197 198This example shows a dialog box with an image above and text below. 199 200```ts 201import { TipsDialog } from '@kit.ArkUI'; 202import { image } from '@kit.ImageKit'; 203 204@Entry 205@Component 206struct Index { 207 @State pixelMap: PixelMap | undefined = undefined; 208 isChecked = false; 209 dialogControllerImage: CustomDialogController = new CustomDialogController({ 210 builder: TipsDialog({ 211 imageRes: $r('sys.media.ohos_ic_public_voice'), 212 content:'Delete this app?', 213 primaryButton: { 214 value: 'Cancel', 215 action: () => { 216 console.info('Callback when the first button is clicked') 217 }, 218 }, 219 secondaryButton: { 220 value: 'Delete', 221 role: ButtonRole.ERROR, 222 action: () => { 223 console.info('Callback when the second button is clicked') 224 } 225 }, 226 onCheckedChange: () => { 227 console.info('Callback when the checkbox is clicked') 228 } 229 }), 230 }) 231 232 build() { 233 Row() { 234 Stack() { 235 Column(){ 236 Button ("Text Below Image") 237 .width(96) 238 .height(40) 239 .onClick(() => { 240 this.dialogControllerImage.open() 241 }) 242 }.margin({bottom: 300}) 243 }.align(Alignment.Bottom) 244 .width('100%').height('100%') 245 } 246 .backgroundImageSize({ width: '100%', height: '100%' }) 247 .height('100%') 248 } 249 250 aboutToAppear(): void { 251 this.getPixmapFromMedia($r('app.media.app_icon')); 252 } 253 254 async getPixmapFromMedia(resource: Resource) { 255 let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({ 256 bundleName: resource.bundleName, 257 moduleName: resource.moduleName, 258 id: resource.id 259 }) 260 let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength)) 261 this.pixelMap = await imageSource.createPixelMap({ 262 desiredPixelFormat: image.PixelMapFormat.RGBA_8888 263 }) 264 await imageSource.release() 265 return this.pixelMap; 266 } 267} 268``` 269 270 271 272### Example 2 273 274This example illustrates a dialog box that contains only a list. 275 276```ts 277import { SelectDialog } from '@kit.ArkUI' 278 279@Entry 280@Component 281struct Index { 282 radioIndex = 0; 283 dialogControllerList: CustomDialogController = new CustomDialogController({ 284 builder: SelectDialog({ 285 title:'Title', 286 selectedIndex: this.radioIndex, 287 confirm: { 288 value: 'Cancel', 289 action: () => {}, 290 }, 291 radioContent: [ 292 { 293 title: 'List item', 294 action: () => { 295 this.radioIndex = 0 296 } 297 }, 298 { 299 title: 'List item', 300 action: () => { 301 this.radioIndex = 1 302 } 303 }, 304 { 305 title: 'List item', 306 action: () => { 307 this.radioIndex = 2 308 } 309 }, 310 ] 311 }), 312 }) 313 314 build() { 315 Row() { 316 Stack() { 317 Column() { 318 Button("List Dialog Box") 319 .width(96) 320 .height(40) 321 .onClick(() => { 322 this.dialogControllerList.open() 323 }) 324 }.margin({ bottom: 300 }) 325 }.align(Alignment.Bottom) 326 .width('100%').height('100%') 327 } 328 .backgroundImageSize({ width: '100%', height: '100%' }) 329 .height('100%') 330 } 331} 332``` 333 334 335 336### Example 3 337 338This example demonstrates a dialog box with text and check boxes. 339 340```ts 341import { ConfirmDialog } from '@kit.ArkUI' 342 343@Entry 344@Component 345struct Index { 346 isChecked = false; 347 dialogControllerCheckBox: CustomDialogController = new CustomDialogController({ 348 builder: ConfirmDialog({ 349 title:'Title', 350 content: 'This is where content is displayed. This is where content is displayed.', 351 isChecked: this.isChecked, 352 checkTips:'Don't ask again after denying', 353 primaryButton: { 354 value: 'Deny', 355 action: () => {}, 356 }, 357 secondaryButton: { 358 value: 'Allow', 359 action: () => { 360 this.isChecked = false 361 console.info('Callback when the second button is clicked') 362 } 363 }, 364 onCheckedChange: () => { 365 console.info('Callback when the checkbox is clicked') 366 }, 367 }), 368 autoCancel: true, 369 alignment: DialogAlignment.Bottom 370 }) 371 372 build() { 373 Row() { 374 Stack() { 375 Column(){ 376 Button ("Text + Check Box Dialog Box") 377 .width(96) 378 .height(40) 379 .onClick(() => { 380 this.dialogControllerCheckBox.open() 381 }) 382 }.margin({bottom: 300}) 383 }.align(Alignment.Bottom) 384 .width('100%').height('100%') 385 } 386 .backgroundImageSize({ width: '100%', height: '100%' }) 387 .height('100%') 388 } 389} 390``` 391 392 393 394### Example 4 395 396This example shows a dialog box that only contains text. 397 398```ts 399import { AlertDialog } from '@kit.ArkUI' 400 401@Entry 402@Component 403struct Index { 404 dialogControllerConfirm: CustomDialogController = new CustomDialogController({ 405 builder: AlertDialog({ 406 primaryTitle: 'Primary title', 407 secondaryTitle: 'Secondary title', 408 content: 'This is where content is displayed.', 409 primaryButton: { 410 value: 'Cancel', 411 action: () => { 412 }, 413 }, 414 secondaryButton: { 415 value: 'OK', 416 role: ButtonRole.ERROR, 417 action: () => { 418 console.info('Callback when the second button is clicked') 419 } 420 }, 421 }), 422 }) 423 424 build() { 425 Row() { 426 Stack() { 427 Column() { 428 Button("Text Dialog Box") 429 .width(96) 430 .height(40) 431 .onClick(() => { 432 this.dialogControllerConfirm.open() 433 }) 434 }.margin({ bottom: 300 }) 435 }.align(Alignment.Bottom) 436 .width('100%').height('100%') 437 } 438 .backgroundImageSize({ width: '100%', height: '100%' }) 439 .height('100%') 440 } 441} 442``` 443 444 445 446### Example 5 447 448This example showcases the use of a progress bar in a dialog box. 449 450```ts 451import { LoadingDialog } from '@kit.ArkUI' 452 453@Entry 454@Component 455struct Index { 456 dialogControllerProgress: CustomDialogController = new CustomDialogController({ 457 builder: LoadingDialog({ 458 content: 'This is where content is displayed.', 459 }), 460 }) 461 462 build() { 463 Row() { 464 Stack() { 465 Column() { 466 Button ("Progress Dialog Box") 467 .width(96) 468 .height(40) 469 .onClick(() => { 470 this.dialogControllerProgress.open() 471 }) 472 }.margin({ bottom: 300 }) 473 }.align(Alignment.Bottom) 474 .width('100%').height('100%') 475 } 476 .backgroundImageSize({ width: '100%', height: '100%' }) 477 .height('100%') 478 } 479} 480``` 481 482 483 484### Example 6 485 486This example presents a dialog box that follows the specified theme style. 487 488```ts 489import { CustomColors, CustomTheme, LoadingDialog } from '@kit.ArkUI' 490 491class CustomThemeImpl implements CustomTheme { 492 colors?: CustomColors; 493 494 constructor(colors: CustomColors) { 495 this.colors = colors; 496 } 497} 498 499class CustomThemeColors implements CustomColors { 500 fontPrimary = '#ffd0a300'; 501 iconSecondary = '#ffd000cd'; 502} 503 504@Entry 505@Component 506struct Index { 507 @State customTheme: CustomTheme = new CustomThemeImpl(new CustomThemeColors()); 508 dialogController: CustomDialogController = new CustomDialogController({ 509 builder: LoadingDialog({ 510 content: 'text', 511 theme: this.customTheme, 512 }) 513 }); 514 515 build() { 516 Row() { 517 Stack() { 518 Column() { 519 Button('dialog') 520 .width(96) 521 .height(40) 522 .onClick(() => { 523 this.dialogController.open(); 524 }) 525 }.margin({ bottom: 300 }) 526 }.align(Alignment.Bottom) 527 .width('100%').height('100%') 528 } 529 .backgroundImageSize({ width: '100%', height: '100%' }) 530 .height('100%') 531 } 532} 533``` 534 535 536 537### Example 7 538 539This example implements a custom dialog box. 540 541```ts 542import { CustomContentDialog } from '@kit.ArkUI' 543 544@Entry 545@Component 546struct Index { 547 dialogController: CustomDialogController = new CustomDialogController({ 548 builder: CustomContentDialog({ 549 primaryTitle: 'Primary title', 550 secondaryTitle: 'Secondary title', 551 contentBuilder: () => { 552 this.buildContent(); 553 }, 554 buttons: [{ value: 'Button 1', buttonStyle: ButtonStyleMode.TEXTUAL, action: () => { 555 console.info('Callback when the button is clicked') 556 } }, { value: 'Button 2', buttonStyle: ButtonStyleMode.TEXTUAL, role: ButtonRole.ERROR }], 557 }), 558 }); 559 560 build() { 561 Column() { 562 Button ("Dialog Box with Custom Content") 563 .onClick(() => { 564 this.dialogController.open() 565 }) 566 } 567 .width('100%') 568 .height('100%') 569 .justifyContent(FlexAlign.Center) 570 } 571 572 @Builder 573 buildContent(): void { 574 Column() { 575 Text('Content area') 576 } 577 } 578} 579``` 580 581 582
