• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Span
2
3作为Text组件的子组件，用于显示行内文本的组件。
4
5>  **说明：**
6>
7>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10## 子组件
11
12无
13
14
15## 接口
16
17Span(value: string | Resource)
18
19**参数：**
20
21| 参数名 | 参数类型 | 必填 | 参数描述 |
22| -------- | -------- | -------- | -------- |
23| value | string \| [Resource](ts-types.md#resource) | 是 | 文本内容。 |
24
25
26## 属性
27
28通用属性方法仅支持[通用文本样式](ts-universal-attributes-text-style.md)。
29
30| 名称 | 参数类型 | 描述 |
31| -------- | -------- | -------- |
32| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor)<br/>} | 设置文本装饰线样式及其颜色。<br/>默认值：{<br/>type:&nbsp;TextDecorationType.None<br/>color：Color.Black<br/>} |
33| letterSpacing       | number \| string  | 设置文本字符间距。取值小于0，字符聚集重叠，取值大于0且随着数值变大，字符间距越来越大，稀疏分布。                                |
34| textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。<br/>默认值：TextCase.Normal |
35
36
37## 事件
38
39通用事件仅支持[点击事件](ts-universal-attributes-click.md)。
40
41>  **说明：**
42>
43>  由于Span组件无尺寸信息，因此点击事件返回的ClickEvent对象的target属性无效。
44
45
46## 示例
47
48```ts
49// xxx.ets
50@Entry
51@Component
52struct SpanExample {
53  build() {
54    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
55      Text('Basic Usage').fontSize(9).fontColor(0xCCCCCC)
56      Text() {
57        Span('This is the Span component').fontSize(12).textCase(TextCase.Normal)
58          .decoration({ type: TextDecorationType.None, color: Color.Red })
59      }
60
61      // 文本横线添加
62      Text('Text Decoration').fontSize(9).fontColor(0xCCCCCC)
63      Text() {
64        Span('I am Underline-span').decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(12)
65      }
66
67      Text() {
68        Span('I am LineThrough-span')
69          .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
70          .fontSize(12)
71      }
72
73      Text() {
74        Span('I am Overline-span').decoration({ type: TextDecorationType.Overline, color: Color.Red }).fontSize(12)
75      }
76
77      // 文本字符间距
78      Text('LetterSpacing').fontSize(9).fontColor(0xCCCCCC)
79      Text() {
80        Span('span letter spacing')
81          .letterSpacing(0)
82          .fontSize(12)
83      }
84
85      Text() {
86        Span('span letter spacing')
87          .letterSpacing(-2)
88          .fontSize(12)
89      }
90
91      Text() {
92        Span('span letter spacing')
93          .letterSpacing(3)
94          .fontSize(12)
95      }
96
97
98      // 文本大小写展示设置
99      Text('Text Case').fontSize(9).fontColor(0xCCCCCC)
100      Text() {
101        Span('I am Lower-span').fontSize(12)
102          .textCase(TextCase.LowerCase)
103          .decoration({ type: TextDecorationType.None })
104      }
105
106      Text() {
107        Span('I am Upper-span').fontSize(12)
108          .textCase(TextCase.UpperCase)
109          .decoration({ type: TextDecorationType.None })
110      }
111    }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 })
112  }
113}
114```
115
116![span](figures/span.png)
117