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该示例通过renderingStrategy、effectStrategy属性展示了不同的渲染和动效策略。
160
161```ts
162// xxx.ets
163@Entry
164@Component
165struct Index {
166  build() {
167    Column() {
168      Row() {
169        Column() {
170          Text("Light")
171          Text() {
172            SymbolSpan($r('sys.symbol.ohos_trash'))
173              .fontWeight(FontWeight.Lighter)
174              .fontSize(96)
175          }
176        }
177
178        Column() {
179          Text("Normal")
180          Text() {
181            SymbolSpan($r('sys.symbol.ohos_trash'))
182              .fontWeight(FontWeight.Normal)
183              .fontSize(96)
184          }
185        }
186
187        Column() {
188          Text("Bold")
189          Text() {
190            SymbolSpan($r('sys.symbol.ohos_trash'))
191              .fontWeight(FontWeight.Bold)
192              .fontSize(96)
193          }
194        }
195      }
196
197      Row() {
198        Column() {
199          Text("单色")
200          Text() {
201            SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
202              .fontSize(96)
203              .renderingStrategy(SymbolRenderingStrategy.SINGLE)
204              .fontColor([Color.Black, Color.Green, Color.White])
205          }
206        }
207
208        Column() {
209          Text("多色")
210          Text() {
211            SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
212              .fontSize(96)
213              .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
214              .fontColor([Color.Black, Color.Green, Color.White])
215          }
216        }
217
218        Column() {
219          Text("分层")
220          Text() {
221            SymbolSpan($r('sys.symbol.ohos_folder_badge_plus'))
222              .fontSize(96)
223              .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY)
224              .fontColor([Color.Black, Color.Green, Color.White])
225          }
226        }
227      }
228
229      Row() {
230        Column() {
231          Text("无动效")
232          Text() {
233            SymbolSpan($r('sys.symbol.ohos_wifi'))
234              .fontSize(96)
235              .effectStrategy(SymbolEffectStrategy.NONE)
236          }
237        }
238
239        Column() {
240          Text("整体缩放动效")
241          Text() {
242            SymbolSpan($r('sys.symbol.ohos_wifi'))
243              .fontSize(96)
244              .effectStrategy(1)
245          }
246        }
247
248        Column() {
249          Text("层级动效")
250          Text() {
251            SymbolSpan($r('sys.symbol.ohos_wifi'))
252              .fontSize(96)
253              .effectStrategy(2)
254          }
255        }
256      }
257    }
258  }
259}
260```
261![SymbolSpan](figures/symbolSpan.gif)