• 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 TextSpanSample {
22  @State textAlign: string = 'Center';
23  @State textOverflow: string = 'None';
24  @State maxLines: number = 20;
25  @State lineHeight: number = 25;
26  @State decoration: string = 'None';
27  @State decorationLineColor: string = 'rgba(0,0,0,1)';
28  @State baselineOffset: number = 10;
29  @State textCase: string = 'Normal';
30  @State fontSize: number = 20;
31  @State fontWeight: number = 200;
32  @State fontColor: string = 'rgba(0,0,0,1)';
33  @State fontstyle: string = 'Normal';
34  @State fontFamily: string = 'Microsoft YaHei';
35
36  build() {
37    Column() {
38      NavigationBar({ title: 'Text' })
39
40      Column() {
41        Text('我能吞下玻璃而不伤身体。我能吞下玻璃而不伤身体。我能吞下玻璃而不伤身体。我能吞下玻璃而不伤身体。'
42        + '我能吞下玻璃而不伤身体。我能吞下玻璃而不伤身体。我能吞下玻璃而不伤身体。我能吞下玻璃而不伤身体。' +
43        '我能吞下玻璃而不伤身体。我能吞下玻璃而不伤身体。我能吞下玻璃而不伤身体。我能吞下玻璃而不伤身体。')
44          .width('100%')
45          .textAlign(TextAlign[this.textAlign])
46          .textOverflow({ overflow: TextOverflow[this.textOverflow] })
47          .maxLines(this.maxLines)
48          .lineHeight(this.lineHeight)
49          .decoration({ type: TextDecorationType[this.decoration], color: this.decorationLineColor })
50          .fontSize(this.fontSize)
51          .fontWeight(this.fontWeight)
52          .fontColor(this.fontColor)
53          .fontStyle(FontStyle[this.fontstyle])
54          .fontFamily(this.fontFamily)
55          .baselineOffset(this.baselineOffset)
56
57        Text(`I can eat glass, it doesn't hurt me.`)
58          .textAlign(TextAlign[this.textAlign])
59          .textOverflow({ overflow: TextOverflow[this.textOverflow] })
60          .maxLines(this.maxLines)
61          .lineHeight(this.lineHeight)
62          .decoration({ type: TextDecorationType[this.decoration], color: this.decorationLineColor })
63          .fontSize(this.fontSize)
64          .fontWeight(this.fontWeight)
65          .fontColor(this.fontColor)
66          .fontStyle(FontStyle[this.fontstyle])
67          .fontFamily(this.fontFamily)
68          .textCase(TextCase[this.textCase])
69          .baselineOffset(this.baselineOffset)
70          .margin({ top: 20 })
71      }
72      .justifyContent(FlexAlign.Start)
73      .backgroundColor('#E6E6FA')
74
75      Scroll() {
76        Column() {
77          Text('Text组件属性')
78            .fontSize(20)
79            .width('100%')
80            .padding({ left: '3%', right: '3%' })
81            .border({ width: 1, color: '#eee', radius: 10 })
82            .margin({ top: 40, bottom: 8 })
83
84          Row() {
85            Text('textAlign')
86              .fontSize('16fp')
87              .fontColor('#182431')
88              .opacity(0.5)
89              .fontWeight(FontWeight.Medium)
90            Column() {
91              Text(this.textAlign)
92                .fontSize('16fp')
93                .fontWeight(FontWeight.Medium)
94                .fontColor('#182431')
95            }
96            .bindMenu([
97              {
98                value: 'Start',
99                action: () => {
100                  this.textAlign = 'Start'
101                }
102              },
103              {
104                value: 'Center',
105                action: () => {
106                  this.textAlign = 'Center'
107                }
108              },
109              {
110                value: 'End',
111                action: () => {
112                  this.textAlign = 'End'
113                }
114              },
115            ])
116          }
117          .justifyContent(FlexAlign.SpaceBetween)
118          .alignItems(VerticalAlign.Center)
119          .padding('3%')
120          .borderRadius(24)
121          .backgroundColor('#FFFFFF')
122          .margin({ top: 8 })
123          .width('100%')
124
125          Row() {
126            Text('textOverflow')
127              .fontSize('16fp')
128              .fontColor('#182431')
129              .opacity(0.5)
130              .fontWeight(FontWeight.Medium)
131            Column() {
132              Text(this.textOverflow)
133                .fontSize('16fp')
134                .fontWeight(FontWeight.Medium)
135                .fontColor('#182431')
136            }
137            .bindMenu([
138              {
139                value: 'None',
140                action: () => {
141                  this.textOverflow = 'None'
142                  this.maxLines = 3
143                }
144              },
145              {
146                value: 'Clip',
147                action: () => {
148                  this.textOverflow = 'Clip'
149                  this.maxLines = 1
150                }
151              },
152              {
153                value: 'Ellipsis',
154                action: () => {
155                  this.textOverflow = 'Ellipsis'
156                  this.maxLines = 1
157                }
158              },
159            ])
160          }
161          .justifyContent(FlexAlign.SpaceBetween)
162          .alignItems(VerticalAlign.Center)
163          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
164          .borderRadius(24)
165          .backgroundColor('#FFFFFF')
166          .margin({ top: 8 })
167          .width('100%')
168
169          Row() {
170            Text('maxLines')
171              .fontSize('16fp')
172              .fontColor('#182431')
173              .opacity(0.5)
174              .fontWeight(FontWeight.Medium)
175            Column() {
176              Text('' + this.maxLines)
177                .fontSize('16fp')
178                .fontWeight(FontWeight.Medium)
179                .fontColor('#182431')
180            }
181            .bindMenu([
182              {
183                value: '1',
184                action: () => {
185                  this.maxLines = 1
186                }
187              },
188              {
189                value: '2',
190                action: () => {
191                  this.maxLines = 2
192                }
193              },
194              {
195                value: '3',
196                action: () => {
197                  this.maxLines = 3
198                }
199              },
200              {
201                value: '20',
202                action: () => {
203                  this.maxLines = 20
204                }
205              },
206            ])
207          }
208          .justifyContent(FlexAlign.SpaceBetween)
209          .alignItems(VerticalAlign.Center)
210          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
211          .borderRadius(24)
212          .backgroundColor('#FFFFFF')
213          .margin({ top: 8 })
214          .width('100%')
215
216          Row() {
217            Text('lineHeight')
218              .fontSize('16fp')
219              .fontColor('#182431')
220              .opacity(0.5)
221              .fontWeight(FontWeight.Medium)
222            Column() {
223              Text('' + this.lineHeight)
224                .fontSize('16fp')
225                .fontWeight(FontWeight.Medium)
226                .fontColor('#182431')
227            }
228            .bindMenu([
229              {
230                value: '25',
231                action: () => {
232                  this.lineHeight = 25
233                }
234              },
235              {
236                value: '30',
237                action: () => {
238                  this.lineHeight = 30
239                }
240              },
241              {
242                value: '35',
243                action: () => {
244                  this.lineHeight = 35
245                }
246              },
247              {
248                value: '40',
249                action: () => {
250                  this.lineHeight = 40
251                }
252              },
253            ])
254          }
255          .justifyContent(FlexAlign.SpaceBetween)
256          .alignItems(VerticalAlign.Center)
257          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
258          .borderRadius(24)
259          .backgroundColor('#FFFFFF')
260          .margin({ top: 8 })
261          .width('100%')
262
263          Row() {
264            Text('textDecoration')
265              .fontSize('16fp')
266              .fontColor('#182431')
267              .opacity(0.5)
268              .fontWeight(FontWeight.Medium)
269            Column() {
270              Text(this.decoration)
271                .fontSize('16fp')
272                .fontWeight(FontWeight.Medium)
273                .fontColor('#182431')
274            }
275            .bindMenu([
276              {
277                value: 'Overline',
278                action: () => {
279                  this.decoration = 'Overline'
280                }
281              },
282              {
283                value: 'LineThrough',
284                action: () => {
285                  this.decoration = 'LineThrough'
286                }
287              },
288              {
289                value: 'Underline',
290                action: () => {
291                  this.decoration = 'Underline'
292                },
293              },
294              {
295                value: 'None',
296                action: () => {
297                  this.decoration = 'None'
298                },
299              }
300            ])
301          }
302          .justifyContent(FlexAlign.SpaceBetween)
303          .alignItems(VerticalAlign.Center)
304          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
305          .borderRadius(24)
306          .backgroundColor('#FFFFFF')
307          .margin({ top: 8 })
308          .width('100%')
309
310          Row() {
311            Text('lineColor')
312              .fontSize('16fp')
313              .fontColor('#182431')
314              .opacity(0.5)
315              .fontWeight(FontWeight.Medium)
316            Column() {
317              GetColor({ colorVal: $decorationLineColor })
318            }.width(48)
319          }
320          .justifyContent(FlexAlign.SpaceBetween)
321          .alignItems(VerticalAlign.Center)
322          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
323          .borderRadius(24)
324          .backgroundColor('#FFFFFF')
325          .margin({ top: 8 })
326          .width('100%')
327
328          Row() {
329            Text('textCase')
330              .fontSize('16fp')
331              .fontColor('#182431')
332              .opacity(0.5)
333              .fontWeight(FontWeight.Medium)
334            Column() {
335              Text(this.textCase)
336                .fontSize('16fp')
337                .fontColor('#182431')
338                .fontWeight(FontWeight.Medium)
339            }
340            .bindMenu([
341              {
342                value: 'Normal',
343                action: () => {
344                  this.textCase = 'Normal'
345                }
346              },
347              {
348                value: 'LowerCase',
349                action: () => {
350                  this.textCase = 'LowerCase'
351                }
352              },
353              {
354                value: 'UpperCase',
355                action: () => {
356                  this.textCase = 'UpperCase'
357                }
358              },
359            ])
360          }
361          .justifyContent(FlexAlign.SpaceBetween)
362          .alignItems(VerticalAlign.Center)
363          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
364          .borderRadius(24)
365          .backgroundColor('#FFFFFF')
366          .margin({ top: 8 })
367          .width('100%')
368
369          Row() {
370            Text('baselineOffset')
371              .fontSize('16fp')
372              .fontColor('#182431')
373              .opacity(0.5)
374              .fontWeight(FontWeight.Medium)
375            Column() {
376              Text('' + this.baselineOffset)
377                .fontSize('16fp')
378                .fontWeight(FontWeight.Medium)
379                .fontColor('#182431')
380            }
381            .bindMenu([
382              {
383                value: '-10',
384                action: () => {
385                  this.baselineOffset = -10
386                }
387              },
388              {
389                value: '10',
390                action: () => {
391                  this.baselineOffset = 10
392                }
393              },
394            ])
395          }
396          .justifyContent(FlexAlign.SpaceBetween)
397          .alignItems(VerticalAlign.Center)
398          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
399          .borderRadius(24)
400          .backgroundColor('#FFFFFF')
401          .margin({ top: 8 })
402          .width('100%')
403
404
405          Text('文本通用属性')
406            .fontSize(20)
407            .width('100%')
408            .padding({ left: '3%', right: '3%' })
409            .border({ width: 1, color: '#eee', radius: 10 })
410            .margin({ top: 24, bottom: 10 })
411
412          Row() {
413            Text('fontSize')
414              .fontSize('16fp')
415              .fontColor('#182431')
416              .opacity(0.5)
417              .fontWeight(FontWeight.Medium)
418            Row() {
419              Slider({
420                value: this.fontSize,
421                min: 14,
422                max: 30,
423                step: 1,
424                style: SliderStyle.OutSet
425              })
426                .blockColor('#FFFFFF ')
427                .trackColor('rgba(24,36,49,0.2)')
428                .selectedColor('#007DFF')
429                .borderRadius(12)
430                .showTips(true)
431                .onChange((value: number) => {
432                  this.fontSize = value
433                })
434              Text(this.fontSize.toFixed(0)).fontSize(16)
435            }.width('70%')
436          }
437          .justifyContent(FlexAlign.Start)
438          .alignItems(VerticalAlign.Center)
439          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
440          .borderRadius(24)
441          .backgroundColor('#FFFFFF')
442          .margin({ top: 8 })
443          .width('100%')
444
445          Row() {
446            Text('fontWeight')
447              .fontSize('16fp')
448              .fontColor('#182431')
449              .opacity(0.5)
450              .fontWeight(FontWeight.Medium)
451            Column() {
452              Text('' + this.fontWeight)
453                .fontSize('16fp')
454                .fontWeight(FontWeight.Medium)
455                .fontColor('#182431')
456            }
457            .bindMenu([
458              {
459                value: '300',
460                action: () => {
461                  this.fontWeight = 300
462                }
463              },
464              {
465                value: '500',
466                action: () => {
467                  this.fontWeight = 500
468                }
469              },
470              {
471                value: '700',
472                action: () => {
473                  this.fontWeight = 700
474                }
475              },
476              {
477                value: '900',
478                action: () => {
479                  this.fontWeight = 900
480                }
481              },
482            ])
483          }
484          .justifyContent(FlexAlign.SpaceBetween)
485          .alignItems(VerticalAlign.Center)
486          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
487          .borderRadius(24)
488          .backgroundColor('#FFFFFF')
489          .margin({ top: 8 })
490          .width('100%')
491
492          Row() {
493            Text('fontColor')
494              .fontSize('16fp')
495              .fontColor('#182431')
496              .opacity(0.5)
497              .fontWeight(FontWeight.Medium)
498            Column() {
499              GetColor({ colorVal: $fontColor })
500            }.width(48)
501          }
502          .justifyContent(FlexAlign.SpaceBetween)
503          .alignItems(VerticalAlign.Center)
504          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
505          .borderRadius(24)
506          .backgroundColor('#FFFFFF')
507          .margin({ top: 8 })
508          .width('100%')
509
510          Row() {
511            Text('fontStyle')
512              .fontSize('16fp')
513              .fontColor('#182431')
514              .opacity(0.5)
515              .fontWeight(FontWeight.Medium)
516            Column() {
517              Text(this.fontstyle)
518                .fontSize('16fp')
519                .fontWeight(FontWeight.Medium)
520                .fontColor('#182431')
521            }
522            .bindMenu([
523              {
524                value: 'Normal',
525                action: () => {
526                  this.fontstyle = 'Normal'
527                }
528              },
529              {
530                value: 'Italic',
531                action: () => {
532                  this.fontstyle = 'Italic'
533                }
534              },
535            ])
536          }
537          .width('100%')
538          .justifyContent(FlexAlign.SpaceBetween)
539          .alignItems(VerticalAlign.Center)
540          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
541          .borderRadius(24)
542          .backgroundColor('#FFFFFF')
543          .margin({ top: 8 })
544
545          Row() {
546            Text('fontFamily')
547              .fontSize('16fp')
548              .fontColor('#182431')
549              .opacity(0.5)
550              .fontWeight(FontWeight.Medium)
551            Column() {
552              Text(this.fontFamily)
553                .fontSize('16fp')
554                .fontWeight(FontWeight.Medium)
555                .fontColor('#182431')
556            }
557            .bindMenu([
558              {
559                value: 'Microsoft YaHei',
560                action: () => {
561                  this.fontFamily = 'Microsoft YaHei'
562                }
563              },
564              {
565                value: 'FangSong',
566                action: () => {
567                  this.fontFamily = 'FangSong'
568                }
569              },
570              {
571                value: 'SimHei',
572                action: () => {
573                  this.fontFamily = 'SimHei'
574                }
575              },
576              {
577                value: 'KaiTi',
578                action: () => {
579                  this.fontFamily = 'KaiTi'
580                }
581              }
582            ])
583          }
584          .width('100%')
585          .justifyContent(FlexAlign.SpaceBetween)
586          .alignItems(VerticalAlign.Center)
587          .padding({ left: '3%', right: '3%', top: 12, bottom: 12 })
588          .borderRadius(24)
589          .backgroundColor('#FFFFFF')
590          .margin({ top: 8, bottom: 13 })
591        }
592      }
593      .width('97%')
594      .layoutWeight(1)
595      .margin({ right: '3%', top: 10, bottom: 20 })
596    }
597    .height('100%')
598    .margin({ bottom: 20 })
599    .padding({ left: '3%', right: '3%' })
600    .backgroundColor('#F1F3F5')
601  }
602
603  pageTransition() {
604    PageTransitionEnter({ duration: 370, curve: Curve.Friction })
605      .slide(SlideEffect.Bottom)
606      .opacity(0.0)
607
608    PageTransitionExit({ duration: 370, curve: Curve.Friction })
609      .slide(SlideEffect.Bottom)
610      .opacity(0.0)
611  }
612}