1# SymbolSpan 2 3As a child component of the **Text** component, the **SymbolSpan** component is used to display small icons. 4 5> **NOTE** 6> 7> - This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> - This component can inherit attribute settings from its parent component **Text**. This means that, if an attribute is not set in this component, it takes the value of the attribute (if set) from its parent component. 10> 11> - The **SymbolSpan** component is not dimmed when dragged. 12 13## Child Components 14 15Not supported 16 17## APIs 18 19SymbolSpan(value: Resource) 20 21**Widget capability**: This API can be used in ArkTS widgets since API version 12. 22 23**Atomic service API**: This API can be used in atomic services since API version 12. 24 25**System capability**: SystemCapability.ArkUI.ArkUI.Full 26 27**Parameters** 28 29| Name| Type| Mandatory| Description| 30| -------- | -------- | -------- | -------- | 31| value | [Resource](ts-types.md#resource)| Yes| Resource of the **SymbolSpan** component, for example, **$r('sys.symbol.ohos_wifi')**.| 32 33> **NOTE** 34> 35> The resources referenced in **$r('sys.symbol.ohos_wifi')** are preset in the system. The **SymbolSpan** component supports only the preset symbol resources. If unsupported resources are referenced, an exception occurs. 36 37## Attributes 38 39The [universal attributes](ts-universal-attributes-size.md) are not supported. Only the following attributes are supported. 40 41### fontColor 42 43fontColor(value: Array<ResourceColor>) 44 45Sets the color of the symbol span. 46 47**Widget capability**: This API can be used in ArkTS widgets since API version 12. 48 49**Atomic service API**: This API can be used in atomic services since API version 12. 50 51**System capability**: SystemCapability.ArkUI.ArkUI.Full 52 53**Parameters** 54 55| Name| Type | Mandatory| Description | 56| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ | 57| value | Array\<[ResourceColor](ts-types.md#resourcecolor)\> | Yes | Color of the symbol span.<br> Default value: depending on the rendering strategy| 58 59### fontSize 60 61fontSize(value: number | string | Resource) 62 63Sets the size of the symbol span. 64 65**Widget capability**: This API can be used in ArkTS widgets since API version 12. 66 67**Atomic service API**: This API can be used in atomic services since API version 12. 68 69**System capability**: SystemCapability.ArkUI.ArkUI.Full 70 71**Parameters** 72 73| Name| Type | Mandatory| Description | 74| ------ | ------------------------------------------------------------ | ---- | --------------------------------------------- | 75| value | number \| string \| [Resource](ts-types.md#resource) | Yes | Size of the symbol span.<br>Default value: system default value| 76 77### fontWeight 78 79fontWeight(value: number | FontWeight | string) 80 81Sets the weight of the symbol span. For the number type, the value ranges from 100 to 900, at an interval of 100. A larger value indicates a heavier font weight. The default value is **400**. For the string type, only strings of the number type are supported, for example, **"400"**, **"bold"**, **"bolder"**, **"lighter"**, **"regular"**, and **"medium"**, which correspond to the enumerated values in **FontWeight**. 82 83The **sys.symbol.ohos_lungs** icon does not support font weight setting. 84 85**Widget capability**: This API can be used in ArkTS widgets since API version 12. 86 87**Atomic service API**: This API can be used in atomic services since API version 12. 88 89**System capability**: SystemCapability.ArkUI.ArkUI.Full 90 91**Parameters** 92 93| Name| Type | Mandatory| Description | 94| ------ | ------------------------------------------------------------ | ---- | -------------------------------------------------- | 95| value | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | Yes | Weight of the symbol span.<br>Default value: **FontWeight.Normal**| 96 97### renderingStrategy 98 99renderingStrategy(value: SymbolRenderingStrategy) 100 101Sets the rendering strategy of the symbol span. 102 103**Widget capability**: This API can be used in ArkTS widgets since API version 12. 104 105**Atomic service API**: This API can be used in atomic services since API version 12. 106 107**System capability**: SystemCapability.ArkUI.ArkUI.Full 108 109**Parameters** 110 111| Name| Type | Mandatory| Description | 112| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 113| value | [SymbolRenderingStrategy](ts-basic-components-symbolGlyph.md#symbolrenderingstrategy11) | Yes | Rendering strategy of the symbol span.<br>Default value: **SymbolRenderingStrategy.SINGLE**| 114 115The figure below shows the effects of different rendering strategies. 116 117 118 119### effectStrategy 120 121effectStrategy(value: SymbolEffectStrategy) 122 123Sets the symbol effect of the symbol span. 124 125**Widget capability**: This API can be used in ArkTS widgets since API version 12. 126 127**Atomic service API**: This API can be used in atomic services since API version 12. 128 129**System capability**: SystemCapability.ArkUI.ArkUI.Full 130 131**Parameters** 132 133| Name| Type | Mandatory| Description | 134| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------------------- | 135| value | [SymbolEffectStrategy](ts-basic-components-symbolGlyph.md#symboleffectstrategy11) | Yes | Symbol effect of the symbol span.<br>Default value: **SymbolEffectStrategy.NONE**| 136 137### attributeModifier<sup>12+</sup> 138 139attributeModifier(modifier: AttributeModifier\<SymbolSpanAttribute>) 140 141Creates an attribute modifier. 142 143**Atomic service API**: This API can be used in atomic services since API version 12. 144 145**System capability**: SystemCapability.ArkUI.ArkUI.Full 146 147**Parameters** 148 149| Name| Type | Mandatory| Description | 150| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ | 151| modifier | [AttributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifiert)\<SymbolSpanAttribute> | Yes | Modifier for dynamically setting attributes on the current component.| 152 153## Events 154 155The [universal events](ts-universal-events-click.md) are not supported. 156 157## Example 158 159```ts 160// xxx.ets 161@Entry 162@Component 163struct Index { 164 build() { 165 Column() { 166 Row() { 167 Column() { 168 Text("Light") 169 Text() { 170 SymbolSpan($r('sys.symbol.ohos_trash')) 171 .fontWeight(FontWeight.Lighter) 172 .fontSize(96) 173 } 174 } 175 176 Column() { 177 Text("Normal") 178 Text() { 179 SymbolSpan($r('sys.symbol.ohos_trash')) 180 .fontWeight(FontWeight.Normal) 181 .fontSize(96) 182 } 183 } 184 185 Column() { 186 Text("Bold") 187 Text() { 188 SymbolSpan($r('sys.symbol.ohos_trash')) 189 .fontWeight(FontWeight.Bold) 190 .fontSize(96) 191 } 192 } 193 } 194 195 Row() { 196 Column() { 197 Text ("Monochrome") 198 Text() { 199 SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) 200 .fontSize(96) 201 .renderingStrategy(SymbolRenderingStrategy.SINGLE) 202 .fontColor([Color.Black, Color.Green, Color.White]) 203 } 204 } 205 206 Column() { 207 Text ("Multicolor") 208 Text() { 209 SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) 210 .fontSize(96) 211 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR) 212 .fontColor([Color.Black, Color.Green, Color.White]) 213 } 214 } 215 216 Column() { 217 Text ("Multilayer") 218 Text() { 219 SymbolSpan($r('sys.symbol.ohos_folder_badge_plus')) 220 .fontSize(96) 221 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) 222 .fontColor([Color.Black, Color.Green, Color.White]) 223 } 224 } 225 } 226 227 Row() { 228 Column() { 229 Text ("No effect") 230 Text() { 231 SymbolSpan($r('sys.symbol.ohos_wifi')) 232 .fontSize(96) 233 .effectStrategy(SymbolEffectStrategy.NONE) 234 } 235 } 236 237 Column() { 238 Text ("Overall scale effect") 239 Text() { 240 SymbolSpan($r('sys.symbol.ohos_wifi')) 241 .fontSize(96) 242 .effectStrategy(1) 243 } 244 } 245 246 Column() { 247 Text ("Hierarchical effect") 248 Text() { 249 SymbolSpan($r('sys.symbol.ohos_wifi')) 250 .fontSize(96) 251 .effectStrategy(2) 252 } 253 } 254 } 255 } 256 } 257} 258``` 259 260
