• 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 */
15import { NavigationBar } from '../../../common/components/navigationBar'
16import { GetColor } from '../../../common/components/getColor'
17
18enum AttributesType {
19  BUTTON,
20  OPTION,
21  SELECTEDOPTION
22}
23
24@Observed
25class SelectAttributes {
26  public selected: number = 0
27  public value: string = 'TTT'
28  public buttonFont: Font = new Font(60, FontWeight.Normal, 'serif', FontStyle.Normal)
29  public selectedOptionFont: Font = new Font(60, FontWeight.Normal, 'serif', FontStyle.Normal)
30  public optionFont: Font = new Font(40, FontWeight.Normal, 'serif', FontStyle.Normal)
31}
32
33@Observed
34class Font {
35  public size: number = 60
36  public weight: FontWeight = FontWeight.Normal
37  public family: string = 'serif'
38  public style: FontStyle = FontStyle.Normal
39
40  constructor(size: number, weight: FontWeight, family: string, style: FontStyle) {
41    this.size = size, this.weight = weight, this.family = family, this.style = style
42  }
43}
44
45@Entry
46@Component
47struct SelectSample {
48  @State attributes: SelectAttributes = new SelectAttributes()
49  @State fontColor: string = 'white'
50  @State optionFontColor: string = 'black'
51  @State optionBgColor: string = 'white'
52  @State selectedOptionBgColor: string = '#ee0a24'
53  @State selectedOptionFontColor: string = 'black'
54  private controller: TabsController = new TabsController()
55  @State attributesType: AttributesType = AttributesType.BUTTON
56
57  build() {
58    Column() {
59      NavigationBar({ title: 'Select' })
60      // 上部分显示效果
61      Scroll() {
62        Column() {
63          Select([{ value: 'select1', icon: '/common/favor.png' },
64                  { value: 'select2', icon: '/common/favor.png' },
65                  { value: 'select3', icon: '/common/favor.png' },
66                  { value: 'select4', icon: '/common/favor.png' }])
67            .selected(this.attributes.selected)
68            .value(this.attributes.value)
69            .font({
70              size: this.attributes.buttonFont.size,
71              weight: this.attributes.buttonFont.weight,
72              family: this.attributes.buttonFont.family,
73              style: this.attributes.buttonFont.style
74            })
75            .selectedOptionFont({
76              size: this.attributes.selectedOptionFont.size,
77              weight: this.attributes.selectedOptionFont.weight,
78              family: this.attributes.selectedOptionFont.family,
79              style: this.attributes.selectedOptionFont.style
80            })
81            .selectedOptionFontColor(this.selectedOptionFontColor)
82            .fontColor(this.fontColor)
83            .selectedOptionBgColor(this.selectedOptionBgColor)
84            .optionFont({
85              size: this.attributes.optionFont.size,
86              weight: this.attributes.optionFont.weight,
87              family: this.attributes.optionFont.family,
88              style: this.attributes.optionFont.style
89            })
90            .optionBgColor(this.optionBgColor)
91            .optionFontColor(this.optionFontColor)
92        }
93        .alignItems(HorizontalAlign.Center)
94        .justifyContent(FlexAlign.Center)
95        .width('100%')
96      }
97      .constraintSize({ minHeight: 218, maxHeight: 402 })
98      .width('100%')
99      .padding(18)
100      .backgroundColor('#696969')
101      // 下部分属性、属性值
102      Scroll() {
103        Column() {
104          Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
105            TabContent() {
106              Scroll() {
107                Column() {
108                  ButtonControl({
109                    attributes: this.attributes, fontColor: $fontColor
110                  })
111                  FontControl({
112                    attributes: this.attributes, attributesType: $attributesType
113                  })
114                }.height(500)
115              }
116            }.tabBar('Button属性')
117
118            TabContent() {
119              Scroll() {
120                Column() {
121                  OptionControl({
122                    attributes: this.attributes, optionFontColor: $optionFontColor, optionBgColor: $optionBgColor
123                  })
124                  FontControl({
125                    attributes: this.attributes, attributesType: $attributesType
126                  })
127                }.height(500)
128              }
129
130            }.tabBar('Option属性').height('100%')
131
132            TabContent() {
133              Scroll() {
134                Column() {
135                  SelectedOptionControl({
136                    attributes: this.attributes,
137                    selectedOptionBgColor: $selectedOptionBgColor,
138                    selectedOptionFontColor: $selectedOptionFontColor
139                  })
140                  FontControl({
141                    attributes: this.attributes, attributesType: $attributesType
142                  })
143                }.height(500)
144              }
145            }.tabBar('Selected属性')
146          }
147          .vertical(false)
148          .scrollable(true)
149          .barMode(BarMode.Fixed)
150          .barWidth(400)
151          .animationDuration(100)
152          .onChange((index: number) => {
153            this.attributesType = index
154            console.info(`${this.attributesType}`)
155          })
156          .height('100%')
157        }
158        .width('100%')
159      }
160      .width('100%')
161      .height('60%')
162      .margin({ top: 24 })
163    }
164    .height('100%')
165    .backgroundColor('#F1F3F5')
166    .padding({ left: '3%', right: '3%', bottom: 10 })
167  }
168}
169
170@Component
171struct ButtonControl {
172  @ObjectLink attributes: SelectAttributes
173  @Link fontColor: string
174
175  build() {
176    Column() {
177      Row() {
178        Text('value')
179          .fontWeight(FontWeight.Medium)
180          .fontColor('#182431')
181          .opacity(0.5)
182          .fontSize('16fp')
183        Column() {
184          TextInput({ placeholder: '' })
185            .type(InputType.Normal)
186            .placeholderColor(Color.Blue)
187            .placeholderFont({ size: 25, weight: FontWeight.Normal, family: 'Arial', style: FontStyle.Normal })
188            .enterKeyType(EnterKeyType.Next)
189            .caretColor(Color.Green)
190            .width('20%')
191            .fontSize('10fp')
192            .fontFamily('cursive')
193            .fontStyle(FontStyle.Italic)
194            .fontWeight(FontWeight.Regular)
195            .borderRadius(24)
196            .fontColor('#182431')
197            .maxLength(20)
198            .onChange((value: string) => {
199              this.attributes.value = value
200            })
201        }
202      }
203      .justifyContent(FlexAlign.SpaceBetween)
204      .alignItems(VerticalAlign.Center)
205      .width('100%')
206      .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
207      .borderRadius(24)
208      .backgroundColor('#FFFFFF')
209
210      Row() {
211        Text('fontColor')
212          .fontWeight(FontWeight.Medium)
213          .fontColor('#182431')
214          .opacity(0.5)
215          .fontSize('16fp')
216        Row() {
217          GetColor({ colorVal: $fontColor })
218        }.width('20%')
219      }
220      .justifyContent(FlexAlign.SpaceBetween)
221      .alignItems(VerticalAlign.Center)
222      .width('100%')
223      .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
224      .borderRadius(24)
225      .backgroundColor('#FFFFFF')
226      .margin({ top: 8 })
227    }
228  }
229}
230
231@Component
232struct SelectedOptionControl {
233  @ObjectLink attributes: SelectAttributes
234  @Link selectedOptionBgColor: string
235  @Link selectedOptionFontColor: string
236
237  build() {
238    Column() {
239      Row() {
240        Text('selectedOptionBgColor')
241          .fontWeight(FontWeight.Medium)
242          .fontColor('#182431')
243          .opacity(0.5)
244          .fontSize('16fp')
245        Row() {
246          GetColor({ colorVal: $selectedOptionBgColor })
247        }.width('20%')
248      }
249      .width('100%')
250      .justifyContent(FlexAlign.SpaceBetween)
251      .alignItems(VerticalAlign.Center)
252      .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
253      .borderRadius(24)
254      .backgroundColor('#FFFFFF')
255      .margin({ top: 8 })
256
257      Row() {
258        Text('selectedOptionFontColor')
259          .fontWeight(FontWeight.Medium)
260          .fontColor('#182431')
261          .opacity(0.5)
262          .fontSize('16fp')
263        Row() {
264          GetColor({ colorVal: $selectedOptionFontColor })
265        }.width('20%')
266      }
267      .justifyContent(FlexAlign.SpaceBetween)
268      .alignItems(VerticalAlign.Center)
269      .width('100%')
270      .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
271      .borderRadius(24)
272      .backgroundColor('#FFFFFF')
273      .margin({ top: 8 })
274    }
275  }
276}
277
278@Component
279struct OptionControl {
280  @ObjectLink attributes: SelectAttributes
281  @Link optionFontColor: string
282  @Link optionBgColor: string
283
284  build() {
285    Column() {
286      Row() {
287        Text('selected')
288          .fontWeight(FontWeight.Medium)
289          .fontColor('#182431')
290          .opacity(0.5)
291          .fontSize('16fp')
292
293        Column() {
294          Text(`${this.attributes.selected}`)
295            .fontSize('10fp')
296            .fontColor('#182431')
297            .fontWeight(FontWeight.Medium)
298            .width('50%')
299            .textAlign(TextAlign.End)
300        }
301        .bindMenu([
302          {
303            value: '0',
304            action: () => {
305              this.attributes.selected = 0
306            }
307          },
308          {
309            value: '1',
310            action: () => {
311              this.attributes.selected = 1
312            }
313          },
314          {
315            value: '2',
316            action: () => {
317              this.attributes.selected = 2
318            }
319          },
320          {
321            value: '3',
322            action: () => {
323              this.attributes.selected = 3
324            }
325          },
326        ])
327      }
328      .justifyContent(FlexAlign.SpaceBetween)
329      .alignItems(VerticalAlign.Center)
330      .width('100%')
331      .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
332      .borderRadius(24)
333      .backgroundColor('#FFFFFF')
334
335      Row() {
336        Text('optionFontColor')
337          .fontWeight(FontWeight.Medium)
338          .fontColor('#182431')
339          .opacity(0.5)
340          .fontSize('16fp')
341        Row() {
342          GetColor({ colorVal: $optionFontColor })
343        }.width('20%')
344      }
345      .justifyContent(FlexAlign.SpaceBetween)
346      .alignItems(VerticalAlign.Center)
347      .width('100%')
348      .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
349      .borderRadius(24)
350      .backgroundColor('#FFFFFF')
351      .margin({ top: 8 })
352
353      Row() {
354        Text('optionBgColor')
355          .fontWeight(FontWeight.Medium)
356          .fontColor('#182431')
357          .opacity(0.5)
358          .fontSize('16fp')
359        Row() {
360          GetColor({ colorVal: $optionBgColor })
361        }.width('20%')
362      }
363      .justifyContent(FlexAlign.SpaceBetween)
364      .alignItems(VerticalAlign.Center)
365      .width('100%')
366      .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
367      .borderRadius(24)
368      .backgroundColor('#FFFFFF')
369      .margin({ top: 8 })
370    }
371  }
372}
373
374@Component
375struct FontControl {
376  @ObjectLink attributes: SelectAttributes
377  @Link attributesType: AttributesType
378
379  build() {
380    Column() {
381      Row() {
382        Text('fontSize')
383          .fontWeight(FontWeight.Medium)
384          .fontColor('#182431')
385          .opacity(0.5)
386          .fontSize('16fp')
387        Column() {
388          TextInput({ placeholder: '' })
389            .type(InputType.Normal)
390            .placeholderColor(Color.Blue)
391            .placeholderFont({ size: 25, weight: FontWeight.Normal, family: 'Arial', style: FontStyle.Normal })
392            .enterKeyType(EnterKeyType.Next)
393            .caretColor(Color.Green)
394            .width('20%')
395            .fontSize(25)
396            .fontFamily('cursive')
397            .fontStyle(FontStyle.Italic)
398            .borderRadius(24)
399            .fontWeight(FontWeight.Regular)
400            .fontColor('#182431')
401            .maxLength(20)
402            .onChange((value: string) => {
403              if (this.attributesType == AttributesType.BUTTON) {
404                this.attributes.buttonFont = new Font(parseInt(value), this.attributes.buttonFont.weight, this.attributes.buttonFont.family, this.attributes.buttonFont.style)
405              } else if (this.attributesType == AttributesType.OPTION) {
406                this.attributes.optionFont = new Font(parseInt(value), this.attributes.optionFont.weight, this.attributes.optionFont.family, this.attributes.optionFont.style)
407              } else if (this.attributesType == AttributesType.SELECTEDOPTION) {
408                this.attributes.selectedOptionFont = new Font(parseInt(value), this.attributes.selectedOptionFont.weight, this.attributes.selectedOptionFont.family, this.attributes.selectedOptionFont.style)
409              }
410            })
411        }
412      }
413      .justifyContent(FlexAlign.SpaceBetween)
414      .alignItems(VerticalAlign.Center)
415      .width('100%')
416      .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
417      .borderRadius(24)
418      .backgroundColor('#FFFFFF')
419      .margin({ top: 8 })
420
421      Row() {
422        Text('fontWeight')
423          .fontWeight(FontWeight.Medium)
424          .fontColor('#182431')
425          .opacity(0.5)
426          .fontSize('16fp')
427        Column() {
428          TextInput({ placeholder: '' })
429            .type(InputType.Normal)
430            .placeholderColor(Color.Blue)
431            .placeholderFont({ size: 25, weight: FontWeight.Normal, family: 'Arial', style: FontStyle.Normal })
432            .enterKeyType(EnterKeyType.Next)
433            .caretColor(Color.Green)
434            .width('20%')
435            .fontSize('10fp')
436            .fontFamily('cursive')
437            .fontStyle(FontStyle.Italic)
438            .borderRadius(24)
439            .fontWeight(FontWeight.Regular)
440            .fontColor('#182431')
441            .maxLength(20)
442            .onChange((value: string) => {
443              if (this.attributesType == AttributesType.BUTTON) {
444                this.attributes.buttonFont = new Font(this.attributes.buttonFont.size, parseInt(value), this.attributes.buttonFont.family, this.attributes.buttonFont.style)
445              } else if (this.attributesType == AttributesType.OPTION) {
446                this.attributes.optionFont = new Font(this.attributes.optionFont.size, parseInt(value), this.attributes.optionFont.family, this.attributes.optionFont.style)
447              } else if (this.attributesType == AttributesType.SELECTEDOPTION) {
448                this.attributes.selectedOptionFont = new Font(this.attributes.selectedOptionFont.size, parseInt(value), this.attributes.selectedOptionFont.family, this.attributes.selectedOptionFont.style)
449              }
450            })
451        }
452      }
453      .justifyContent(FlexAlign.SpaceBetween)
454      .alignItems(VerticalAlign.Center)
455      .width('100%')
456      .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
457      .borderRadius(24)
458      .backgroundColor('#FFFFFF')
459      .margin({ top: 8 })
460
461      Row() {
462        Text('fontFamily')
463          .fontWeight(FontWeight.Medium)
464          .fontColor('#182431')
465          .opacity(0.5)
466          .fontSize('16fp')
467        Column() {
468          TextInput({ placeholder: '' })
469            .type(InputType.Normal)
470            .placeholderColor(Color.Blue)
471            .placeholderFont({ size: 25, weight: FontWeight.Normal, family: 'Arial', style: FontStyle.Normal })
472            .enterKeyType(EnterKeyType.Next)
473            .caretColor(Color.Green)
474            .width('20%')
475            .fontSize('10fp')
476            .fontFamily('cursive')
477            .fontStyle(FontStyle.Italic)
478            .borderRadius(24)
479            .fontWeight(FontWeight.Regular)
480            .fontColor('#182431')
481            .maxLength(20)
482            .onChange((value: string) => {
483              if (this.attributesType == AttributesType.BUTTON) {
484                this.attributes.buttonFont = new Font(this.attributes.buttonFont.size, this.attributes.buttonFont.weight, value, this.attributes.buttonFont.style)
485              } else if (this.attributesType == AttributesType.OPTION) {
486                this.attributes.optionFont = new Font(this.attributes.optionFont.size, this.attributes.optionFont.weight, value, this.attributes.optionFont.style)
487              } else if (this.attributesType == AttributesType.SELECTEDOPTION) {
488                this.attributes.selectedOptionFont = new Font(this.attributes.selectedOptionFont.size, this.attributes.selectedOptionFont.weight, value, this.attributes.selectedOptionFont.style)
489              }
490            })
491        }
492      }
493      .justifyContent(FlexAlign.SpaceBetween)
494      .alignItems(VerticalAlign.Center)
495      .width('100%')
496      .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
497      .borderRadius(24)
498      .backgroundColor('#FFFFFF')
499      .margin({ top: 8 })
500
501      Row() {
502        Text('fontStyle')
503          .fontWeight(FontWeight.Medium)
504          .fontColor('#182431')
505          .opacity(0.5)
506          .fontSize('16fp')
507        Column() {
508          if (this.attributesType == AttributesType.BUTTON) {
509            Text(this.attributes.buttonFont.style == FontStyle.Normal ? 'Normal' : 'Italic')
510              .fontSize('10fp')
511              .fontColor('#182431')
512              .fontWeight(FontWeight.Medium)
513              .width('50%')
514              .textAlign(TextAlign.End)
515          } else if (this.attributesType == AttributesType.OPTION) {
516            Text(this.attributes.optionFont.style == FontStyle.Normal ? 'Normal' : 'Italic')
517              .fontSize('10fp')
518              .fontColor('#182431')
519              .fontWeight(FontWeight.Medium)
520              .width('50%')
521              .textAlign(TextAlign.End)
522          } else if (this.attributesType == AttributesType.SELECTEDOPTION) {
523            Text(this.attributes.selectedOptionFont.style == FontStyle.Normal ? 'Normal' : 'Italic')
524              .fontSize('10fp')
525              .fontColor('#182431')
526              .fontWeight(FontWeight.Medium)
527              .width('50%')
528              .textAlign(TextAlign.End)
529          }
530        }
531        .bindMenu([
532          {
533            value: 'Normal',
534            action: () => {
535              if (this.attributesType == AttributesType.BUTTON) {
536                this.attributes.buttonFont = new Font(this.attributes.buttonFont.size, this.attributes.buttonFont.weight, this.attributes.buttonFont.family, FontStyle.Normal)
537              } else if (this.attributesType == AttributesType.OPTION) {
538                this.attributes.optionFont = new Font(this.attributes.optionFont.size, this.attributes.optionFont.weight, this.attributes.optionFont.family, FontStyle.Italic)
539              } else if (this.attributesType == AttributesType.SELECTEDOPTION) {
540                this.attributes.selectedOptionFont = new Font(this.attributes.selectedOptionFont.size, this.attributes.selectedOptionFont.weight, this.attributes.selectedOptionFont.family, FontStyle.Italic)
541              }
542            }
543          },
544          {
545            value: 'Italic',
546            action: () => {
547              if (this.attributesType == AttributesType.BUTTON) {
548                this.attributes.buttonFont = new Font(this.attributes.buttonFont.size, this.attributes.buttonFont.weight, this.attributes.buttonFont.family, FontStyle.Italic)
549                console.log(`${this.attributes.buttonFont.style}`);
550              } else if (this.attributesType == AttributesType.OPTION) {
551                this.attributes.optionFont = new Font(this.attributes.optionFont.size, this.attributes.optionFont.weight, this.attributes.optionFont.family, FontStyle.Italic)
552              } else if (this.attributesType == AttributesType.SELECTEDOPTION) {
553                this.attributes.selectedOptionFont = new Font(this.attributes.selectedOptionFont.size, this.attributes.selectedOptionFont.weight, this.attributes.selectedOptionFont.family, FontStyle.Italic)
554              }
555            }
556          }
557        ])
558      }
559      .justifyContent(FlexAlign.SpaceBetween)
560      .alignItems(VerticalAlign.Center)
561      .width('100%')
562      .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
563      .borderRadius(24)
564      .backgroundColor('#FFFFFF')
565      .margin({ top: 8 })
566    }
567  }
568
569  pageTransition() {
570    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
571      .slide(SlideEffect.Bottom)
572      .opacity(0.0)
573
574    PageTransitionExit({ duration: 370, curve: Curve.Friction })
575      .slide(SlideEffect.Bottom)
576      .opacity(0.0)
577  }
578}