• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2025 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16@CustomDialog
17export struct CustomDialogControllerExample {
18  @Link textValue: string
19  @Link inputValue: string
20  controller?: CustomDialogController
21  cancel: () => void = () => {
22  }
23  confirm: () => void = () => {
24  }
25
26  build() {
27    Column() {
28      Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
29      TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
30        .onChange((value: string) => {
31          this.textValue = value
32        })
33      Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
34      Flex({ justifyContent: FlexAlign.SpaceAround }) {
35        Button('cancel')
36          .onClick(() => {
37            if (this.controller != undefined) {
38              this.controller.close()
39              this.cancel()
40            }
41          }).backgroundColor(0xffffff).fontColor(Color.Black)
42        Button('confirm')
43          .onClick(() => {
44            if (this.controller != undefined) {
45              this.inputValue = this.textValue
46              this.controller.close()
47              this.confirm()
48            }
49          }).backgroundColor(0xffffff).fontColor(Color.Red)
50      }.margin({ bottom: 10 })
51    }.borderRadius(10)
52  }
53}
54
55@CustomDialog
56export struct CustomDialogController_with_radius {
57  radius: Dimension = 24
58  controller: CustomDialogController = new CustomDialogController({
59    builder: CustomDialogController_with_radius({})
60  })
61  cancel: () => void = () => {
62  }
63  confirm: () => void = () => {
64  }
65
66  build() {
67    Column() {
68      Text('Change text').fontSize(20).margin({ top: 20, bottom: 10 })
69      Flex({ justifyContent: FlexAlign.SpaceAround }) {
70        Button('cancel')
71          .onClick(() => {
72            this.controller.close()
73            this.cancel()
74          }).backgroundColor(0xffffff).fontColor(Color.Black)
75        Button('confirm')
76          .onClick(() => {
77            this.controller.close()
78            this.confirm()
79          }).backgroundColor(0xffffff).fontColor(Color.Red)
80      }.margin({ bottom: 10 })
81    }
82    .borderRadius(this.radius)
83    .borderWidth(1.0)
84  }
85}
86
87@CustomDialog
88export struct CustomDialogController_with_backgroundColor {
89  backgroundColorBuilder: Color = Color.Orange
90  controller: CustomDialogController = new CustomDialogController({
91    builder: CustomDialogController_with_backgroundColor({})
92  })
93  cancel: () => void = () => {
94  }
95  confirm: () => void = () => {
96  }
97
98  build() {
99    Column() {
100      Text('Change text').fontSize(20).margin({ top: 20, bottom: 10 })
101      Flex({ justifyContent: FlexAlign.SpaceAround }) {
102        Button('cancel')
103          .onClick(() => {
104            this.controller.close()
105            this.cancel()
106          }).backgroundColor(0xffffff).fontColor(Color.Black)
107        Button('confirm')
108          .onClick(() => {
109            this.controller.close()
110            this.confirm()
111          }).backgroundColor(0xffffff).fontColor(Color.Red)
112      }.margin({ bottom: 10 })
113    }
114    .borderWidth(1.0)
115    .backgroundColor(this.backgroundColorBuilder)
116  }
117}
118
119@CustomDialog
120export struct CustomDialogController_with_backgroundColor_radius {
121  radius: number = 24
122  backgroundColorBuilder: Color = Color.Orange
123  controller: CustomDialogController = new CustomDialogController({
124    builder: CustomDialogController_with_backgroundColor_radius({})
125  })
126  cancel: () => void = () => {
127  }
128  confirm: () => void = () => {
129  }
130
131  build() {
132    Column() {
133      Text('Change text').fontSize(20).margin({ top: 20, bottom: 10 })
134      Flex({ justifyContent: FlexAlign.SpaceAround }) {
135        Button('cancel')
136          .onClick(() => {
137            this.controller.close()
138            this.cancel()
139          }).backgroundColor(0xffffff).fontColor(Color.Black)
140        Button('confirm')
141          .onClick(() => {
142            this.controller.close()
143            this.confirm()
144          }).backgroundColor(0xffffff).fontColor(Color.Red)
145      }.margin({ bottom: 10 })
146    }
147    .borderRadius(this.radius)
148    .borderWidth(1.0)
149    .backgroundColor(this.backgroundColorBuilder)
150  }
151}
152
153@CustomDialog
154export struct CustomDialogController_with_size_inBuilder {
155  radius: number = 24
156  backgroundColorBuilder: Color = Color.Pink
157  widthBuilder: string = '100%'
158  heightBuilder: string = '100%'
159  widthBuilderText: string = '80%'
160  controller: CustomDialogController = new CustomDialogController({
161    builder: CustomDialogController_with_size_inBuilder({})
162  })
163  cancel: () => void = () => {
164  }
165  confirm: () => void = () => {
166  }
167
168  build() {
169    Column() {
170      Text('Change text')
171        .textAlign(TextAlign.Center)
172        .fontSize(20)
173        .margin({ top: 20, bottom: 10 })
174        .borderWidth(1.0)
175        .borderColor(Color.Blue)
176        .borderRadius(this.radius)
177        .width(this.widthBuilderText)
178      Flex({ justifyContent: FlexAlign.SpaceAround }) {
179        Button('cancel')
180          .onClick(() => {
181            this.controller.close()
182            this.cancel()
183          }).backgroundColor(0xffffff).fontColor(Color.Black)
184        Button('confirm')
185          .onClick(() => {
186            this.controller.close()
187            this.confirm()
188          }).backgroundColor(0xffffff).fontColor(Color.Red)
189      }.margin({ bottom: 10 })
190    }
191    .width(this.widthBuilder)
192    .height(this.heightBuilder)
193    .borderRadius(this.radius)
194    .borderWidth(1.0)
195    .backgroundColor(this.backgroundColorBuilder)
196  }
197}
198
199@CustomDialog
200export struct CustomDialogController_with_textInput {
201  @Link textValue: string
202  @Link inputValue: string
203  controller: CustomDialogController
204  cancel: () => void = () => {
205  }
206  confirm: () => void = () => {
207  }
208
209  build() {
210    Column() {
211      Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })
212      TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
213        .onChange((value: string) => {
214          this.textValue = value
215        })
216      Text('Whether to change a text?').fontSize(16).margin({ top: 10, bottom: 10 })
217      Flex({ justifyContent: FlexAlign.SpaceAround }) {
218        Button('cancel')
219          .onClick(() => {
220            this.controller.close()
221            this.cancel()
222          }).backgroundColor(0xffffff).fontColor(Color.Black)
223        Button('confirm')
224          .onClick(() => {
225            this.inputValue = this.textValue
226            this.controller.close()
227            this.confirm()
228          }).backgroundColor(0xffffff).fontColor(Color.Red)
229      }.margin({ bottom: 10 })
230    }.borderRadius(24)
231  }
232}
233
234@CustomDialog
235@Component
236export struct CustomDialogExample {
237  @Link textValue: string
238  @Link inputValue: string
239  controller?: CustomDialogController
240
241  // 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在所有controller的后面
242  build() {
243    Column() {
244      Text('CustomDialog').fontSize(20).margin({ top: 10, bottom: 10 })
245      TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
246        .onChange((value: string) => {
247          this.textValue = value
248        })
249        .key('keyboard_in_customDialog')
250      Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
251      Flex({ justifyContent: FlexAlign.SpaceAround }) {
252        Button('cancel')
253          .onClick(() => {
254            if (this.controller != undefined) {
255              this.controller.close()
256            }
257          }).backgroundColor(0xffffff).fontColor(Color.Black)
258        Button('confirm')
259          .onClick(() => {
260            if (this.controller != undefined) {
261              this.inputValue = this.textValue
262              this.controller.close()
263            }
264          }).backgroundColor(0xffffff).fontColor(Color.Red)
265      }.margin({ bottom: 10 })
266    }
267    .margin(5)
268    .borderRadius(10)
269    .borderWidth(1.0)
270    .borderColor(Color.Brown)
271    .backgroundColor('#ffb6c5ed')
272  }
273}
274
275@CustomDialog
276@Component
277export struct CustomDialogWithOtherDialogsExample {
278  @Link textValue: string
279  @Link inputValue: string
280  controller?: CustomDialogController
281
282  // 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在所有controller的后面
283
284  build() {
285    Column() {
286      Text('CustomDialog').fontSize(20).margin({ top: 10, bottom: 10 })
287      TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
288        .onChange((value: string) => {
289          this.textValue = value
290        })
291      Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
292      Flex({ justifyContent: FlexAlign.SpaceAround }) {
293        Button('cancel')
294          .onClick(() => {
295            if (this.controller != undefined) {
296              this.controller.close()
297            }
298          }).backgroundColor(0xffffff).fontColor(Color.Black)
299        Button('confirm')
300          .onClick(() => {
301            if (this.controller != undefined) {
302              this.inputValue = this.textValue
303              this.controller.close()
304            }
305          }).backgroundColor(0xffffff).fontColor(Color.Red)
306      }.margin({ bottom: 10 })
307    }
308    .margin(5)
309    .borderRadius(10)
310    .borderWidth(1.0)
311    .borderColor(Color.Brown)
312    .backgroundColor('#ffb6c5ed')
313  }
314}
315
316@CustomDialog
317@Component
318export struct CustomDialog_Blur {
319  @Link textValue: string
320  @Link inputValue: string
321  controller?: CustomDialogController
322
323  // 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在所有controller的后面
324  build() {
325    Column() {
326      Text('CustomDialog').fontSize(20).margin({ top: 10, bottom: 10 })
327      TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
328        .onChange((value: string) => {
329          this.textValue = value
330        })
331      Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
332      Flex({ justifyContent: FlexAlign.SpaceAround }) {
333        Button('cancel')
334          .onClick(() => {
335            if (this.controller != undefined) {
336              this.controller.close()
337            }
338          }).backgroundColor(0xffffff).fontColor(Color.Black)
339        Button('confirm')
340          .onClick(() => {
341            if (this.controller != undefined) {
342              this.inputValue = this.textValue
343              this.controller.close()
344            }
345          }).backgroundColor(0xffffff).fontColor(Color.Red)
346      }.margin({ bottom: 10 })
347    }
348  }
349}
350
351
352