1# Custom Dialog Box 2 3A custom dialog box is a dialog box you customize by using APIs of the **CustomDialogController** class. You can set the style and content to your preference for a custom dialog box. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10 11 12## APIs 13 14CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number, maskColor?: ResourceColor, openAnimation?: AnimateParam, closeAniamtion?: AnimateParam}) 15 16 17**Parameters** 18 19| Name | Type | Mandatory | Description | 20| ---------------------- | ---------------------------------------- | ------------------------- | ---------------------- | 21| builder | [CustomDialog](../../quick-start/arkts-dynamic-ui-elememt-building.md#customdialog) | Yes | Constructor of the custom dialog box content. | 22| cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay exits. | 23| autoCancel | boolean | No | Whether to allow users to click the overlay to exit.<br>Default value: **true** | 24| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default** | 25| offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.| 26| customStyle | boolean | No | Whether to use a custom style for the dialog box.<br>Default value: **false**, which means that the dialog box automatically adapts its width to the grid system and its height to the child components; the maximum height is 90% of the container height; the rounded corner is 24 vp. | 27| gridCount<sup>8+</sup> | number | No | Number of [grid columns](../../ui/ui-ts-layout-grid-container-new.md) occupied by the dialog box.<br>The default value is 4, and the maximum value is the maximum number of columns supported by the system. If this parameter is set to an invalid value, the default value is used.| 28 29## CustomDialogController 30 31### Objects to Import 32 33```ts 34dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean}) 35``` 36 37### open() 38open(): void 39 40 41Opens the content of the custom dialog box. If the content has been displayed, this API does not take effect. 42 43 44### close 45close(): void 46 47 48Closes the custom dialog box. If the dialog box is closed, this API does not take effect. 49 50 51## Example 52 53```ts 54// xxx.ets 55@CustomDialog 56struct CustomDialogExample { 57 @Link textValue: string 58 @Link inputValue: string 59 controller: CustomDialogController 60 cancel: () => void 61 confirm: () => void 62 63 build() { 64 Column() { 65 Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 }) 66 TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%') 67 .onChange((value: string) => { 68 this.textValue = value 69 }) 70 Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 }) 71 Flex({ justifyContent: FlexAlign.SpaceAround }) { 72 Button('cancel') 73 .onClick(() => { 74 this.controller.close() 75 this.cancel() 76 }).backgroundColor(0xffffff).fontColor(Color.Black) 77 Button('confirm') 78 .onClick(() => { 79 this.inputValue = this.textValue 80 this.controller.close() 81 this.confirm() 82 }).backgroundColor(0xffffff).fontColor(Color.Red) 83 }.margin({ bottom: 10 }) 84 } 85 } 86} 87 88@Entry 89@Component 90struct CustomDialogUser { 91 @State textValue: string = '' 92 @State inputValue: string = 'click me' 93 dialogController: CustomDialogController = new CustomDialogController({ 94 builder: CustomDialogExample({ 95 cancel: this.onCancel, 96 confirm: this.onAccept, 97 textValue: $textValue, 98 inputValue: $inputValue 99 }), 100 cancel: this.existApp, 101 autoCancel: true, 102 alignment: DialogAlignment.Default, 103 offset: { dx: 0, dy: -20 }, 104 gridCount: 4, 105 customStyle: false 106 }) 107 108 aboutToDisappear() { 109 delete this.dialogController, 110 this.dialogController = undefined 111 } 112 113 onCancel() { 114 console.info('Callback when the first button is clicked') 115 } 116 117 onAccept() { 118 console.info('Callback when the second button is clicked') 119 } 120 121 existApp() { 122 console.info('Click the callback in the blank area') 123 } 124 125 build() { 126 Column() { 127 Button(this.inputValue) 128 .onClick(() => { 129 if (this.dialogController != undefined) { 130 this.dialogController.open() 131 } 132 }).backgroundColor(0x317aff) 133 }.width('100%').margin({ top: 5 }) 134 } 135} 136``` 137 138 139
