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 | 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/arkts-layout-development-grid-layout.md) occupied by the dialog box.<br>The default value is subject to the window size, 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> **NOTE** 37> 38> **CustomDialogController** is valid only when it is a member variable of the **@CustomDialog** and **@Component** decorated struct and is defined in the **@Component** decorated struct. For details, see the following example. 39 40### open() 41open(): void 42 43 44Opens the content of the custom dialog box. This API can be called multiple times. If the dialog box displayed in a subwindow, no new subwindow is allowed. 45 46 47### close 48close(): void 49 50 51Closes the custom dialog box. If the dialog box is closed, this API does not take effect. 52 53 54## Example 55 56```ts 57// xxx.ets 58@CustomDialog 59struct CustomDialogExample { 60 @Link textValue: string 61 @Link inputValue: string 62 controller: CustomDialogController 63 // You can pass in multiple other controllers in the CustomDialog to open one or more other CustomDialogs in the CustomDialog. In this case, you must place the controller pointing to the self at the end. 64 cancel: () => void 65 confirm: () => void 66 67 build() { 68 Column() { 69 Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 }) 70 TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%') 71 .onChange((value: string) => { 72 this.textValue = value 73 }) 74 Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 }) 75 Flex({ justifyContent: FlexAlign.SpaceAround }) { 76 Button('cancel') 77 .onClick(() => { 78 this.controller.close() 79 this.cancel() 80 }).backgroundColor(0xffffff).fontColor(Color.Black) 81 Button('confirm') 82 .onClick(() => { 83 this.inputValue = this.textValue 84 this.controller.close() 85 this.confirm() 86 }).backgroundColor(0xffffff).fontColor(Color.Red) 87 }.margin({ bottom: 10 }) 88 } 89 // The default value of borderRadius is 24vp. The border attribute must be used together with the borderRadius attribute. 90 } 91} 92 93@Entry 94@Component 95struct CustomDialogUser { 96 @State textValue: string = '' 97 @State inputValue: string = 'click me' 98 dialogController: CustomDialogController = new CustomDialogController({ 99 builder: CustomDialogExample({ 100 cancel: this.onCancel, 101 confirm: this.onAccept, 102 textValue: $textValue, 103 inputValue: $inputValue 104 }), 105 cancel: this.existApp, 106 autoCancel: true, 107 alignment: DialogAlignment.Default, 108 offset: { dx: 0, dy: -20 }, 109 gridCount: 4, 110 customStyle: false 111 }) 112 113 // Delete the dialogController instance and set it to undefined when the custom component is about to be destroyed. 114 aboutToDisappear() { 115 delete this.dialogController, // Delete the dialogController instance. 116 this.dialogController = undefined // Set dialogController to undefined. 117 } 118 119 onCancel() { 120 console.info('Callback when the first button is clicked') 121 } 122 123 onAccept() { 124 console.info('Callback when the second button is clicked') 125 } 126 127 existApp() { 128 console.info('Click the callback in the blank area') 129 } 130 131 build() { 132 Column() { 133 Button(this.inputValue) 134 .onClick(() => { 135 if (this.dialogController != undefined) { 136 this.dialogController.open() 137 } 138 }).backgroundColor(0x317aff) 139 }.width('100%').margin({ top: 5 }) 140 } 141} 142``` 143 144 145
