• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Custom Dialog Box (CustomDialog)
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 = new CustomDialogController({
17       builder: CustomDialogExample({}),
18     })
19
20     build() {
21       Column() {
22         Text ('I am content')
23           .fontSize(20)
24           .margin({ top: 10, bottom: 10 })
25       }
26     }
27   }
28   ```
29
303. Create a builder that is bound to the decorator.
31
32   ```ts
33    @Entry
34    @Component
35    struct CustomDialogUser {
36      dialogController: CustomDialogController = new CustomDialogController({
37        builder: CustomDialogExample(),
38      })
39    }
40   ```
41
424. Click the component bound to the **onClick** event to display the dialog box.
43
44   ```ts
45   @Entry
46   @Component
47   struct CustomDialogUser {dialogController: CustomDialogController = new CustomDialogController({
48       builder: CustomDialogExample(),
49     })
50
51     build() {
52       Column() {
53         Button('click me')
54           .onClick(() => {
55             this.dialogController.open()
56           })
57       }.width('100%').margin({ top: 5 })
58     }
59   }
60   ```
61
62   ![en-us_image_0000001562700493](figures/en-us_image_0000001562700493.png)
63
64
65## Interaction with Custom Dialog Box
66
67Custom dialog boxes can be used for data interactions to complete a series of response operations.
68
69
701. Add buttons in the \@CustomDialog decorator structure and add data functions.
71
72  ```ts
73  @CustomDialog
74  struct CustomDialogExample {
75    cancel: () => void = () => {
76      console.info('Callback when the first button is clicked')
77    }
78    confirm: () => void = () => {
79      console.info('Callback when the second button is clicked')
80    }
81    controller: CustomDialogController = new CustomDialogController({
82      builder: CustomDialogExample({
83        cancel: this.cancel,
84        confirm: this.confirm,
85      }),
86    })
87
88    build() {
89      Column() {
90        Text('I am content') .fontSize(20).margin({ top: 10, bottom: 10 })
91        Flex({ justifyContent: FlexAlign.SpaceAround }) {
92          Button('cancel')
93            .onClick(() => {
94              this.controller.close()
95              this.cancel()
96            }).backgroundColor(0xffffff).fontColor(Color.Black)
97          Button('confirm')
98            .onClick(() => {
99              this.controller.close()
100              this.confirm()
101            }).backgroundColor(0xffffff).fontColor(Color.Red)
102        }.margin({ bottom: 10 })
103      }
104    }
105  }
106  ```
107
1082. Receive the page in the builder and create corresponding function operations.
109
110  ```ts
111  @Entry
112  @Component
113  struct CustomDialogUser {
114    @State bud: Record<string, Function | void> = { 'cancel': this.onCancel(), 'confirm': this.onAccept() }
115    dialogController: CustomDialogController = new CustomDialogController({
116      builder: CustomDialogExample(this.bud),
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    build() {
128      Column() {
129        Button('Click Me')
130          .onClick(() => {
131            this.dialogController.open()
132          })
133      }.width('100%').margin({ top: 5 })
134    }
135  }
136  ```
137
138   ![en-us_image_0000001511421320](figures/en-us_image_0000001511421320.png)
139
140## Sample Code
141
142```ts
143// xxx.ets
144@CustomDialog
145struct CustomDialogExample {
146  controller: CustomDialogController = new CustomDialogController({
147    builder: undefined
148  })
149
150  build() {
151    Column() {
152      Text ('I am content')
153        .fontSize(20)
154        .margin({ top: 10, bottom: 10 })
155    }
156  }
157}
158
159@Entry
160@Component
161struct CustomDialogUser {
162  @State bud: Record<string, Function | void> = { 'cancel': this.onCancel(), 'confirm': this.onAccept() }
163  dialogController: CustomDialogController = new CustomDialogController({
164    builder: CustomDialogExample(this.bud),
165  })
166
167  onCancel() {
168    console.info('Callback when the first button is clicked')
169  }
170
171  onAccept() {
172    console.info('Callback when the second button is clicked')
173  }
174
175  build() {
176    Column() {
177      Button('Click Me')
178        .onClick(() => {
179          this.dialogController.open()
180        })
181    }.width('100%').margin({ top: 5 })
182  }
183}
184```
185