1# Span 2 3As a child of the **\<Text>** and **\<RichEditor>** components, the **\<Span>** component is used to display inline text. 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> Since API version 10, this component can inherit the attributes of the **\<Text>** parent component. That is, if no attribute is set for this component, it inherits the attributes (if set) of its parent component. Only the following attributes can be inherited: **fontColor**, **fontSize**, **fontStyle**, **fontWeight**, **decoration**, **letterSpacing**, **textCase**, and **fontfamily**. 10 11 12## Child Components 13 14Not supported 15 16 17## APIs 18 19Span(value: string | Resource) 20 21Since API version 9, this API is supported in ArkTS widgets. 22 23**Parameters** 24 25| Name| Type| Mandatory| Description| 26| -------- | -------- | -------- | -------- | 27| value | string \| [Resource](ts-types.md#resource) | Yes| Plain text.| 28 29 30## Attributes 31 32In addition to the [universal text style](ts-universal-attributes-text-style.md) attributes, the following attributes are supported. 33 34| Name| Type| Description| 35| -------- | -------- | -------- | 36| 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.| 37| 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. | 38| 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.| 39| font<sup>10+</sup> | [Font](ts-types.md#font) | Text style, covering the font size, font width, Font family, and font style.| 40 41 42## Events 43 44Among all the universal events, only the [click event](ts-universal-attributes-click.md) is supported. 45 46> **NOTE** 47> 48> As the **\<Span>** component does not include size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid. 49 50 51## Example 52 53```ts 54// xxx.ets 55@Entry 56@Component 57struct SpanExample { 58 build() { 59 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 60 Text('Basic Usage').fontSize(9).fontColor(0xCCCCCC) 61 Text() { 62 Span('In Line') 63 Span(' Component') 64 Span(' !') 65 } 66 67 Text() { 68 Span('This is the Span component').fontSize(12).textCase(TextCase.Normal) 69 .decoration({ type: TextDecorationType.None, color: Color.Red }) 70 } 71 72 // Add a line under the text. 73 Text('Text Decoration').fontSize(9).fontColor(0xCCCCCC) 74 Text() { 75 Span('I am Underline-span').decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(12) 76 } 77 78 Text() { 79 Span('I am LineThrough-span') 80 .decoration({ type: TextDecorationType.LineThrough, color: Color.Red }) 81 .fontSize(12) 82 } 83 84 Text() { 85 Span('I am Overline-span').decoration({ type: TextDecorationType.Overline, color: Color.Red }).fontSize(12) 86 } 87 88 // Set the letter spacing. 89 Text('LetterSpacing').fontSize(9).fontColor(0xCCCCCC) 90 Text() { 91 Span('span letter spacing') 92 .letterSpacing(0) 93 .fontSize(12) 94 } 95 96 Text() { 97 Span('span letter spacing') 98 .letterSpacing(-2) 99 .fontSize(12) 100 } 101 102 Text() { 103 Span('span letter spacing') 104 .letterSpacing(3) 105 .fontSize(12) 106 } 107 108 109 // Set the text case. 110 Text('Text Case').fontSize(9).fontColor(0xCCCCCC) 111 Text() { 112 Span('I am Lower-span').fontSize(12) 113 .textCase(TextCase.LowerCase) 114 .decoration({ type: TextDecorationType.None }) 115 } 116 117 Text() { 118 Span('I am Upper-span').fontSize(12) 119 .textCase(TextCase.UpperCase) 120 .decoration({ type: TextDecorationType.None }) 121 } 122 }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 }) 123 } 124} 125``` 126 127 128
