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