1# SymbolSpan
2
3作为Text组件的子组件，用于显示图标小符号的组件。
4
5>  **说明：**
6>
7> - 该组件从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9> - 该组件支持继承父组件Text的属性，即如果子组件未设置属性且父组件设置属性，则继承父组件设置的全部属性。
10>
11> - SymbolSpan拖拽不会置灰显示。
12
13## 子组件
14
15不支持子组件。
16
17## 接口
18
19SymbolSpan(value: Resource)
20
21**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。
22
23**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
24
25**系统能力：** SystemCapability.ArkUI.ArkUI.Full
26
27**参数：** 
28
29| 参数名 | 类型 | 必填 | 说明 |
30| -------- | -------- | -------- | -------- |
31| value | [Resource](ts-types.md#resource)| 是 | SymbolSpan组件的资源名，如 $r('sys.symbol.ohos_wifi')。 |
32
33>  **说明：**
34>
35>  $r('sys.symbol.ohos_wifi')中引用的资源为系统预置，SymbolSpan仅支持系统预置的symbol资源名，引用非symbol资源将显示异常。
36
37## 属性
38
39不支持[通用属性](ts-universal-attributes-size.md)，支持以下属性：
40
41### fontColor
42
43fontColor(value: Array<ResourceColor>)
44
45设置SymbolSpan组件颜色。
46
47**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。
48
49**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
50
51**系统能力：** SystemCapability.ArkUI.ArkUI.Full
52
53**参数：** 
54
55| 参数名 | 类型                                                | 必填 | 说明                                                         |
56| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
57| value  | Array\<[ResourceColor](ts-types.md#resourcecolor)\> | 是   | SymbolSpan组件颜色。<br/> 默认值：不同渲染策略下默认值不同。 |
58
59### fontSize
60
61fontSize(value: number | string | Resource)
62
63设置SymbolSpan组件大小。
64
65**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。
66
67**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
68
69**系统能力：** SystemCapability.ArkUI.ArkUI.Full
70
71**参数：** 
72
73| 参数名 | 类型                                                         | 必填 | 说明                                          |
74| ------ | ------------------------------------------------------------ | ---- | --------------------------------------------- |
75| value  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是   | SymbolSpan组件大小。<br/>默认值：系统默认值。 |
76
77### fontWeight
78
79fontWeight(value: number | FontWeight | string)
80
81设置SymbolSpan组件粗细。number类型取值[100,900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular” 、“medium”分别对应FontWeight中相应的枚举值。
82
83sys.symbol.ohos_lungs图标不支持设置fontWeight。
84
85**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。
86
87**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
88
89**系统能力：** SystemCapability.ArkUI.ArkUI.Full
90
91**参数：** 
92
93| 参数名 | 类型                                                         | 必填 | 说明                                               |
94| ------ | ------------------------------------------------------------ | ---- | -------------------------------------------------- |
95| value  | number&nbsp;\|&nbsp;[FontWeight](ts-appendix-enums.md#fontweight)&nbsp;\|&nbsp;string | 是   | SymbolSpan组件粗细。<br/>默认值：FontWeight.Normal |
96
97### renderingStrategy
98
99renderingStrategy(value: SymbolRenderingStrategy)
100
101设置SymbolSpan渲染策略。
102
103**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。
104
105**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
106
107**系统能力：** SystemCapability.ArkUI.ArkUI.Full
108
109**参数：** 
110
111| 参数名 | 类型                                                         | 必填 | 说明                                                         |
112| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
113| value  | [SymbolRenderingStrategy](ts-basic-components-symbolGlyph.md#symbolrenderingstrategy11枚举说明) | 是   | SymbolSpan渲染策略。<br/>默认值：SymbolRenderingStrategy.SINGLE |
114
115不同渲染策略效果可参考以下示意图。
116
117![renderingStrategy](figures/renderingStrategy.png)
118
119### effectStrategy
120
121effectStrategy(value: SymbolEffectStrategy)
122
123设置SymbolSpan动效策略。
124
125**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。
126
127**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
128
129**系统能力：** SystemCapability.ArkUI.ArkUI.Full
130
131**参数：** 
132
133| 参数名 | 类型                                                         | 必填 | 说明                                                       |
134| ------ | ------------------------------------------------------------ | ---- | ---------------------------------------------------------- |
135| value  | [SymbolEffectStrategy](ts-basic-components-symbolGlyph.md#symboleffectstrategy11枚举说明) | 是   | SymbolSpan动效策略。<br/>默认值：SymbolEffectStrategy.NONE |
136
137### attributeModifier<sup>12+</sup>
138
139attributeModifier(modifier: AttributeModifier\<SymbolSpanAttribute>)
140
141设置组件的动态属性。
142
143**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
144
145**系统能力：** SystemCapability.ArkUI.ArkUI.Full
146
147**参数：** 
148
149| 参数名 | 类型                                                | 必填 | 说明                                                         |
150| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
151| modifier  | [AttributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifiert)\<SymbolSpanAttribute> | 是   | 动态设置组件的属性。 |
152
153## 事件
154
155不支持[通用事件](ts-universal-events-click.md)。
156
157## 示例
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("单色")
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("多色")
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("分层")
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("无动效")
230          Text() {
231            SymbolSpan($r('sys.symbol.ohos_wifi'))
232              .fontSize(96)
233              .effectStrategy(SymbolEffectStrategy.NONE)
234          }
235        }
236
237        Column() {
238          Text("整体缩放动效")
239          Text() {
240            SymbolSpan($r('sys.symbol.ohos_wifi'))
241              .fontSize(96)
242              .effectStrategy(1)
243          }
244        }
245
246        Column() {
247          Text("层级动效")
248          Text() {
249            SymbolSpan($r('sys.symbol.ohos_wifi'))
250              .fontSize(96)
251              .effectStrategy(2)
252          }
253        }
254      }
255    }
256  }
257}
258```
259![SymbolSpan](figures/symbolSpan.gif)