1# Span 2 3The **\<Span>** component is used to display inline text in the **\<Text>** component. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17Span(value: string | Resource) 18 19Since API version 9, this API is supported in ArkTS widgets. 20 21**Parameters** 22 23| Name| Type| Mandatory| Description| 24| -------- | -------- | -------- | -------- | 25| value | string \| [Resource](ts-types.md#resource) | Yes| Plain text.| 26 27 28## Attributes 29 30In addition to the [universal text style](ts-universal-attributes-text-style.md) attributes, the following attributes are supported. 31 32| Name| Type| Description| 33| -------- | -------- | -------- | 34| decoration | {<br>type: [TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br>color?: [ResourceColor](ts-types.md#resourcecolor)<br>} | Style and color of the text decorative line.<br>Default value: {<br>type: TextDecorationType.None<br>color: Color.Black<br>} <br>Since API version 9, this API is supported in ArkTS widgets.| 35| letterSpacing | number \| string | Letter spacing. A negative value tightens the spacing; a positive value loosens the spacing, and the letters are spread farther apart with the value.<br>Since API version 9, this API is supported in ArkTS widgets. | 36| textCase | [TextCase](ts-appendix-enums.md#textcase) | Text case.<br>Default value: **TextCase.Normal**<br>Since API version 9, this API is supported in ArkTS widgets.| 37 38 39## Events 40 41Among all the universal events, only the [click event](ts-universal-attributes-click.md) is supported. 42 43> **NOTE** 44> 45> As the **\<Span>** component does not include size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid. 46 47 48## Example 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 // Add a line under the text. 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 // Set the letter spacing. 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 // Set the text case. 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 119
