• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022 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
16import { NavigationBar } from '../../../common/components/navigationBar'
17import { GetColor } from '../../../common/components/getColor'
18
19@Entry
20@Component
21struct TextInputSample {
22  @State inputType: string = 'Normal'
23  @State placeholderColor: string = 'rgba(0,0,0,1)';
24  @State placeholderfontSize: number = 20;
25  @State placeholderfontWeight: number = 200;
26  @State placeholderfontFamily: string = 'Microsoft YaHei';
27  @State placeholderfontStyle: string = 'Normal';
28  @State enterKeyType: string = 'Done';
29  @State caretColor: string = 'rgba(0,0,0,1)';
30  @State maxLength: number = 10;
31  @State bgColor: string = '#E6E6FA';
32  @State textString: string = '';
33
34  build() {
35    Column() {
36      NavigationBar({ title: 'TextInput' })
37
38      Scroll() {
39        Column() {
40          Text('文本显示框')
41            .fontSize(24)
42            .margin({ bottom: 30 })
43            .width('100%')
44            .textAlign(TextAlign.Center)
45          Text(this.textString)
46            .fontSize(18).width('100%').textAlign(TextAlign.Start)
47        }
48        .alignItems(HorizontalAlign.Center)
49        .justifyContent(FlexAlign.Center)
50        .width('100%')
51      }
52      .constraintSize({ minHeight: 218, maxHeight: 402 })
53      .padding({ left: 12, right: 12, top: 22, bottom: 22 })
54      .backgroundColor('#eee')
55
56      Text('textInput输入框')
57        .width('100%')
58        .height('4%')
59        .fontSize(16)
60        .fontColor('#111')
61        .padding({ left: '3%', right: '3%' })
62        .margin({ top: 8, bottom: 8 })
63
64      Row() {
65        TextInput({ placeholder: 'input your word textInput' })
66          .width('100%')
67          .height('100%')
68          .type(InputType[this.inputType])
69          .placeholderColor(this.placeholderColor)
70          .placeholderFont({
71            size: this.placeholderfontSize,
72            weight: this.placeholderfontWeight,
73            family: this.placeholderfontFamily,
74            style: FontStyle[this.placeholderfontStyle]
75          })
76          .enterKeyType(EnterKeyType[this.enterKeyType])
77          .caretColor(this.caretColor)
78          .maxLength(this.maxLength)
79          .onChange((value: string) => {
80            this.textString = value;
81          })
82          .onSubmit((enterKey) => {
83            console.log('textInput1')
84          })
85          .onEditChanged((isEditing) => {
86            console.log('textInput2')
87          })
88      }
89      .justifyContent(FlexAlign.SpaceBetween)
90      .alignItems(VerticalAlign.Center)
91      .height(55)
92      .padding({ right: 10 })
93
94      Scroll() {
95        Column() {
96          Row() {
97            Text('inputType')
98              .fontSize(16)
99              .fontColor('#182431')
100              .opacity(0.5)
101              .fontWeight(FontWeight.Medium)
102            Column() {
103              Text(this.inputType)
104                .fontSize('16fp')
105                .fontWeight(FontWeight.Medium)
106                .fontColor('#182431')
107            }
108            .bindMenu([
109              {
110                value: 'Normal',
111                action: () => {
112                  this.inputType = 'Normal'
113                },
114              },
115              {
116                value: 'Password',
117                action: () => {
118                  this.inputType = 'Password'
119                },
120              },
121              {
122                value: 'Email',
123                action: () => {
124                  this.inputType = 'Email'
125                },
126              },
127              {
128                value: 'Number',
129                action: () => {
130                  this.inputType = 'Number'
131                },
132              },
133            ])
134          }
135          .justifyContent(FlexAlign.SpaceBetween)
136          .alignItems(VerticalAlign.Center)
137          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
138          .borderRadius(24)
139          .backgroundColor('#FFFFFF')
140          .height('15%')
141          .width('100%')
142
143          Row() {
144            Text('placeholderColor')
145              .fontSize('16fp')
146              .fontColor('#182431')
147              .opacity(0.5)
148              .fontWeight(FontWeight.Medium)
149            Column() {
150              GetColor({ colorVal: $placeholderColor })
151            }.width(48)
152          }
153          .justifyContent(FlexAlign.SpaceBetween)
154          .alignItems(VerticalAlign.Center)
155          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
156          .borderRadius(24)
157          .backgroundColor('#FFFFFF')
158          .margin({ top: 8 })
159          .height('15%')
160          .width('100%')
161
162          Row() {
163            Text('placeholderfontSize')
164              .fontSize('16fp')
165              .fontColor('#182431')
166              .opacity(0.5)
167              .fontWeight(FontWeight.Medium)
168            Row() {
169              Slider({
170                value: this.placeholderfontSize,
171                min: 0,
172                max: 100,
173                step: 1,
174                style: SliderStyle.OutSet
175              })
176                .blockColor('#FFFFFF')
177                .trackColor('rgba(24,36,49,0.2)')
178                .selectedColor('#007DFF')
179                .borderRadius(12)
180                .showTips(true)
181                .onChange((value: number) => {
182                  this.placeholderfontSize = value
183
184                })
185              Text(this.placeholderfontSize.toFixed(0))
186                .fontSize('16fp')
187                .fontWeight(FontWeight.Medium)
188                .fontColor('#182431')
189            }.width('48%')
190          }
191          .justifyContent(FlexAlign.Start)
192          .alignItems(VerticalAlign.Center)
193          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
194          .borderRadius(24)
195          .backgroundColor('#FFFFFF')
196          .margin({ top: 8 })
197          .height('15%')
198          .width('100%')
199
200          Row() {
201            Text('placeholderfontWeight')
202              .fontSize('16fp')
203              .fontColor('#182431')
204              .opacity(0.5)
205              .fontWeight(FontWeight.Medium)
206            Row() {
207              Slider({
208                value: this.placeholderfontWeight,
209                min: 100,
210                max: 900,
211                step: 100,
212                style: SliderStyle.OutSet
213              })
214                .blockColor('#FFFFFF')
215                .trackColor('rgba(24,36,49,0.2)')
216                .selectedColor('#007DFF')
217                .borderRadius(12)
218                .showTips(true)
219                .onChange((value: number, mode: SliderChangeMode) => {
220                  this.placeholderfontWeight = value
221                  console.log(`${mode}`)
222                })
223              Text(this.placeholderfontWeight.toFixed(0))
224                .fontSize('16fp')
225                .fontWeight(FontWeight.Medium)
226                .fontColor('#182431')
227            }.width('41%')
228          }
229          .justifyContent(FlexAlign.Start)
230          .alignItems(VerticalAlign.Center)
231          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
232          .borderRadius(24)
233          .backgroundColor('#FFFFFF')
234          .margin({ top: 8 })
235          .height('15%')
236          .width('100%')
237
238          Row() {
239            Text('placeholderfontFamily')
240              .fontSize('16fp')
241              .fontColor('#182431')
242              .opacity(0.5)
243              .fontWeight(FontWeight.Medium)
244            Column() {
245              Text(this.placeholderfontFamily)
246                .fontSize('16fp')
247                .fontWeight(FontWeight.Medium)
248                .fontColor('#182431')
249            }
250            .bindMenu([
251              {
252                value: 'Microsoft YaHei',
253                action: () => {
254                  this.placeholderfontFamily = 'Microsoft YaHei'
255                }
256              },
257              {
258                value: 'FangSong',
259                action: () => {
260                  this.placeholderfontFamily = 'FangSong'
261                }
262              },
263              {
264                value: 'SimHei',
265                action: () => {
266                  this.placeholderfontFamily = 'SimHei'
267                }
268              },
269              {
270                value: 'KaiTi',
271                action: () => {
272                  this.placeholderfontFamily = 'KaiTi'
273                }
274              }
275            ])
276          }
277          .justifyContent(FlexAlign.SpaceBetween)
278          .alignItems(VerticalAlign.Center)
279          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
280          .borderRadius(24)
281          .backgroundColor('#FFFFFF')
282          .margin({ top: 8 })
283          .height('15%')
284          .width('100%')
285
286          Row() {
287            Text('placeholderfontStyle')
288              .fontSize('16fp')
289              .fontColor('#182431')
290              .opacity(0.5)
291              .fontWeight(FontWeight.Medium)
292            Column() {
293              Text(this.placeholderfontStyle)
294                .fontSize('16fp')
295                .fontWeight(FontWeight.Medium)
296                .fontColor('#182431')
297            }
298            .bindMenu([
299              {
300                value: 'Normal',
301                action: () => {
302                  this.placeholderfontStyle = 'Normal'
303                }
304              },
305              {
306                value: 'Italic',
307                action: () => {
308                  this.placeholderfontStyle = 'Italic'
309                }
310              },
311            ])
312          }
313          .justifyContent(FlexAlign.SpaceBetween)
314          .alignItems(VerticalAlign.Center)
315          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
316          .borderRadius(24)
317          .backgroundColor('#FFFFFF')
318          .margin({ top: 8 })
319          .height('15%')
320          .width('100%')
321
322          Row() {
323            Text('enterKeyType')
324              .fontSize('16fp')
325              .fontColor('#182431')
326              .opacity(0.5)
327              .fontWeight(FontWeight.Medium)
328            Column() {
329              Text(this.enterKeyType)
330                .fontSize('16fp')
331                .fontWeight(FontWeight.Medium)
332                .fontColor('#182431')
333            }
334            .bindMenu([
335              {
336                value: 'Done',
337                action: () => {
338                  this.enterKeyType = 'Done'
339                },
340              },
341              {
342                value: 'Go',
343                action: () => {
344                  this.enterKeyType = 'Go'
345                },
346              },
347              {
348                value: 'Search',
349                action: () => {
350                  this.enterKeyType = 'Search'
351                },
352              },
353              {
354                value: 'Send',
355                action: () => {
356                  this.enterKeyType = 'Send'
357                },
358              },
359              {
360                value: 'Next',
361                action: () => {
362                  this.enterKeyType = 'Next'
363                },
364              },
365            ])
366          }
367          .justifyContent(FlexAlign.SpaceBetween)
368          .alignItems(VerticalAlign.Center)
369          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
370          .borderRadius(24)
371          .backgroundColor('#FFFFFF')
372          .margin({ top: 8 })
373          .height('15%')
374          .width('100%')
375
376          Row() {
377            Text('caretColor')
378              .fontSize('16fp')
379              .fontColor('#182431')
380              .opacity(0.5)
381              .fontWeight(FontWeight.Medium)
382            Column() {
383              GetColor({ colorVal: $caretColor })
384            }.width(48)
385
386          }
387          .justifyContent(FlexAlign.SpaceBetween)
388          .alignItems(VerticalAlign.Center)
389          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
390          .borderRadius(24)
391          .backgroundColor('#FFFFFF')
392          .margin({ top: 8 })
393          .height('15%')
394          .width('100%')
395
396          Row() {
397            Text('maxLength')
398              .fontSize('16fp')
399              .fontColor('#182431')
400              .opacity(0.5)
401              .fontWeight(FontWeight.Medium)
402            Column() {
403              Text('' + this.maxLength)
404                .fontSize('16fp')
405                .fontWeight(FontWeight.Medium)
406                .fontColor('#182431')
407            }
408            .bindMenu([
409              {
410                value: '10',
411                action: () => {
412                  this.maxLength = 10
413                },
414              },
415              {
416                value: '20',
417                action: () => {
418                  this.maxLength = 20
419
420                },
421              },
422              {
423                value: '30',
424                action: () => {
425                  this.maxLength = 30
426                },
427              }
428            ])
429          }
430          .justifyContent(FlexAlign.SpaceBetween)
431          .alignItems(VerticalAlign.Center)
432          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
433          .borderRadius(24)
434          .backgroundColor('#FFFFFF')
435          .margin({ top: 8 })
436          .height('15%')
437          .width('100%')
438        }
439        .width('97%')
440        .margin({ right: '3%', bottom: 5 })
441      }
442      .width('100%')
443      .height('50%')
444      .margin({ bottom: 60 })
445    }
446    .alignItems(HorizontalAlign.Center)
447    .padding({ left: '3%', right: '3%' })
448    .height('100%')
449    .backgroundColor('#F1F3F5')
450  }
451
452  pageTransition() {
453    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
454      .slide(SlideEffect.Bottom)
455      .opacity(0.0)
456
457    PageTransitionExit({ duration: 370, curve: Curve.Friction })
458      .slide(SlideEffect.Bottom)
459      .opacity(0.0)
460  }
461}