• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Custom Dialog Box
2
3
4A custom dialog box is a dialog box you customize by using APIs of the **CustomDialogController** class. It can be used for user interactions, showing an ad, prize, alert, software update message, and more. For details, see [Custom Dialog Box](../reference/arkui-ts/ts-methods-custom-dialog-box.md).
5
6
7## Creating a Custom Dialog Box
8
91. Use the \@CustomDialog decorator to create a custom dialog box.
10
112. Set the content for the \@CustomDialog decorated dialog box.
12
13   ```ts
14   @CustomDialog
15   struct CustomDialogExample {
16     controller: CustomDialogController
17     build() {
18       Column() {
19         Text ('I am content')
20         .fontSize(20)
21         .margin({ top: 10, bottom: 10 })
22       }
23     }
24   }
25   ```
26
273. Create a builder that is bound to the decorator.
28
29   ```ts
30   dialogController: CustomDialogController = new CustomDialogController({
31       builder: CustomDialogExample({}),
32   })
33   ```
34
354. Click the component bound to the **onClick** event to display the dialog box.
36
37   ```ts
38   Flex({justifyContent:FlexAlign.Center}){
39     Button('click me')
40       .onClick(() => {
41         this.dialogController.open()
42       })
43   }.width('100%')
44   ```
45
46   ![en-us_image_0000001562700493](figures/en-us_image_0000001562700493.png)
47
48
49## Interaction with Custom Dialog Box
50
51Custom dialog boxes can be used for data interactions to complete a series of response operations.
52
53
541. Add button operations to the \@CustomDialog decorator and add the creation of data functions.
55
56   ```ts
57   @CustomDialog
58   struct CustomDialogExample {
59     controller: CustomDialogController
60     cancel: () => void
61     confirm: () => void
62     build() {
63       Column() {
64         Text('I am content') .fontSize(20).margin({ top: 10, bottom: 10 })
65         Flex({ justifyContent: FlexAlign.SpaceAround }) {
66           Button('cancel')
67             .onClick(() => {
68               this.controller.close()
69               this.cancel()
70             }).backgroundColor(0xffffff).fontColor(Color.Black)
71           Button('confirm')
72             .onClick(() => {
73               this.controller.close()
74               this.confirm()
75             }).backgroundColor(0xffffff).fontColor(Color.Red)
76         }.margin({ bottom: 10 })
77       }
78     }
79   }
80   ```
81
822. Receive the page in the builder and create corresponding function operations.
83
84   ```ts
85   dialogController: CustomDialogController = new CustomDialogController({
86       builder: CustomDialogExample({
87         cancel: this.onCancel,
88         confirm: this.onAccept,
89       }),
90       alignment: DialogAlignment.Default,  // Set the alignment mode of the dialog box. By default, the dialog box is displayed at the bottom.
91     })
92     onCancel() {
93       console.info('Callback when the first button is clicked')
94     }
95     onAccept() {
96       console.info('Callback when the second button is clicked')
97     }
98   ```
99
100   ![en-us_image_0000001511421320](figures/en-us_image_0000001511421320.png)
101