• 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('This is the Span component').fontSize(12).textCase(TextCase.Normal)
60          .decoration({ type: TextDecorationType.None, color: Color.Red })
61      }
62
63      // 文本横线添加
64      Text('Text Decoration').fontSize(9).fontColor(0xCCCCCC)
65      Text() {
66        Span('I am Underline-span').decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(12)
67      }
68
69      Text() {
70        Span('I am LineThrough-span')
71          .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
72          .fontSize(12)
73      }
74
75      Text() {
76        Span('I am Overline-span').decoration({ type: TextDecorationType.Overline, color: Color.Red }).fontSize(12)
77      }
78
79      // 文本字符间距
80      Text('LetterSpacing').fontSize(9).fontColor(0xCCCCCC)
81      Text() {
82        Span('span letter spacing')
83          .letterSpacing(0)
84          .fontSize(12)
85      }
86
87      Text() {
88        Span('span letter spacing')
89          .letterSpacing(-2)
90          .fontSize(12)
91      }
92
93      Text() {
94        Span('span letter spacing')
95          .letterSpacing(3)
96          .fontSize(12)
97      }
98
99
100      // 文本大小写展示设置
101      Text('Text Case').fontSize(9).fontColor(0xCCCCCC)
102      Text() {
103        Span('I am Lower-span').fontSize(12)
104          .textCase(TextCase.LowerCase)
105          .decoration({ type: TextDecorationType.None })
106      }
107
108      Text() {
109        Span('I am Upper-span').fontSize(12)
110          .textCase(TextCase.UpperCase)
111          .decoration({ type: TextDecorationType.None })
112      }
113    }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 })
114  }
115}
116```
117
118![span](figures/span.png)
119