1# SymbolGlyph 2 3The **SymbolGlyph** component represents a symbol glyph. 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## Child Components 10 11Not supported 12 13## APIs 14 15SymbolGlyph(value?: Resource) 16 17**Widget capability**: This API can be used in ArkTS widgets since API version 12. 18 19**Atomic service API**: This API can be used in atomic services since API version 12. 20 21**System capability**: SystemCapability.ArkUI.ArkUI.Full 22 23**Parameters** 24 25| Name| Type| Mandatory| Description| 26| -------- | -------- | -------- | -------- | 27| value | [Resource](ts-types.md#resource)| No| Resource of the **SymbolGlyph** component, for example, **$r('sys.symbol.ohos_wifi')**.| 28 29> **NOTE** 30> 31> The resources referenced in **$r('sys.symbol.ohos_wifi')** are preset in the system. The **SymbolGlyph** component supports only the preset symbol resources. If unsupported resources are referenced, an exception occurs. 32 33## Attributes 34 35The [universal attributes](ts-universal-attributes-size.md) are supported. With regard to text attributes, only the following attributes are supported. 36 37### fontColor 38 39fontColor(value: Array<ResourceColor>) 40 41Sets the color of the **SymbolGlyph** component. 42 43**Widget capability**: This API can be used in ArkTS widgets since API version 12. 44 45**Atomic service API**: This API can be used in atomic services since API version 12. 46 47**System capability**: SystemCapability.ArkUI.ArkUI.Full 48 49**Parameters** 50 51| Name| Type| Mandatory| Description | 52| ------ | ---- | ---- | ----- | 53| value | Array\<[ResourceColor](ts-types.md#resourcecolor)\> | Yes | Color of the **SymbolGlyph** component.<br> Default value: depending on the rendering strategy| 54 55### fontSize 56 57fontSize(value: number | string | Resource) 58 59Sets the size of the **SymbolGlyph** component. 60 61The display size of the symbol glyph is controlled by the **fontSize** setting. Once **width** or **height** is specified, other universal attributes will only affect the size of the component's placeholder, not the symbol glyph itself. 62 63**Widget capability**: This API can be used in ArkTS widgets since API version 12. 64 65**Atomic service API**: This API can be used in atomic services since API version 12. 66 67**System capability**: SystemCapability.ArkUI.ArkUI.Full 68 69**Parameters** 70 71| Name| Type| Mandatory| Description | 72| ------ | ---- | ---- | ----- | 73| value | number \| string \| [Resource](ts-types.md#resource) | Yes | Size of the **SymbolGlyph** component.<br>Default value: system default value| 74 75### fontWeight 76 77fontWeight(value: number | FontWeight | string) 78 79Sets the font weight of the **SymbolGlyph** component. 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**. 80 81The **sys.symbol.ohos_lungs** icon does not support font weight setting. 82 83**Widget capability**: This API can be used in ArkTS widgets since API version 12. 84 85**Atomic service API**: This API can be used in atomic services since API version 12. 86 87**System capability**: SystemCapability.ArkUI.ArkUI.Full 88 89**Parameters** 90 91| Name| Type| Mandatory| Description | 92| ------ | ---- | ---- | ----- | 93| value | number \| string \| [FontWeight](ts-appendix-enums.md#fontweight) | Yes | Font weight of the **SymbolGlyph** component.<br>Default value: **FontWeight.Normal**| 94 95### renderingStrategy 96 97renderingStrategy(value: SymbolRenderingStrategy) 98 99Sets the rendering strategy of the **SymbolGlyph** component. 100 101**Widget capability**: This API can be used in ArkTS widgets since API version 12. 102 103**Atomic service API**: This API can be used in atomic services since API version 12. 104 105**System capability**: SystemCapability.ArkUI.ArkUI.Full 106 107**Parameters** 108 109| Name| Type| Mandatory| Description | 110| ------ | ---- | ---- | ----- | 111| value | [SymbolRenderingStrategy](#symbolrenderingstrategy11) | Yes | Rendering strategy of the **SymbolGlyph** component.<br>Default value: **SymbolRenderingStrategy.SINGLE**| 112 113The figure below shows the effects of different rendering strategies. 114 115 116 117### effectStrategy 118 119effectStrategy(value: SymbolEffectStrategy) 120 121Sets the effect strategy of the **SymbolGlyph** component. 122 123**Widget capability**: This API can be used in ArkTS widgets since API version 12. 124 125**Atomic service API**: This API can be used in atomic services since API version 12. 126 127**System capability**: SystemCapability.ArkUI.ArkUI.Full 128 129**Parameters** 130 131| Name| Type| Mandatory| Description | 132| ------ | ---- | ---- | ----- | 133| value | [SymbolEffectStrategy](#symboleffectstrategy11) | Yes | Effect strategy of the **SymbolGlyph** component.<br>Default value: **SymbolEffectStrategy.NONE**| 134 135### symbolEffect<sup>12+</sup> 136 137symbolEffect(symbolEffect: SymbolEffect, isActive?: boolean) 138 139Sets the symbol effect and effect state for the **SymbolGlyph** component. 140 141**Widget capability**: This API can be used in ArkTS widgets since API version 12. 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| symbolEffect | [SymbolEffect](#symboleffect12) | Yes | Symbol effect of the **SymbolGlyph** component.<br>Default value: [SymbolEffect](#symboleffect12) | 152| isActive | boolean | No | Whether the effect is active.<br>Default value: **false**| 153 154### symbolEffect<sup>12+</sup> 155 156symbolEffect(symbolEffect: SymbolEffect, triggerValue?: number) 157 158Sets the symbol effect and effect trigger for the **SymbolGlyph** component. 159 160**Widget capability**: This API can be used in ArkTS widgets since API version 12. 161 162**Atomic service API**: This API can be used in atomic services since API version 12. 163 164**System capability**: SystemCapability.ArkUI.ArkUI.Full 165 166**Parameters** 167 168| Name| Type| Mandatory| Description | 169| ------ | ---- | ---- | ----- | 170| symbolEffect | [SymbolEffect](#symboleffect12) | Yes | Symbol effect of the **SymbolGlyph** component.<br>Default value: [SymbolEffect](#symboleffect12) | 171| triggerValue | number | No | Value that, when changed, initiates the animation of the **SymbolGlyph** component.<br>To prevent the motion effect from triggering initially, set it to **-1**.| 172 173> **NOTE** 174> 175> When configuring the symbol effect, use the **effectStrategy** attribute or a single **symbolEffect** attribute. Mixing multiple effect attributes is not allowed. 176 177## SymbolEffect<sup>12+</sup> 178 179Defines the **SymbolEffect** class. 180 181**Widget capability**: This API can be used in ArkTS widgets since API version 12. 182 183**Atomic service API**: This API can be used in atomic services since API version 12. 184 185**System capability**: SystemCapability.ArkUI.ArkUI.Full 186 187### constructor<sup>12+</sup> 188 189constructor() 190 191A constructor used to create a **SymbolEffect** instance, which is not animated. 192 193**Widget capability**: This API can be used in ArkTS widgets since API version 12. 194 195**Atomic service API**: This API can be used in atomic services since API version 12. 196 197**System capability**: SystemCapability.ArkUI.ArkUI.Full 198 199## ScaleSymbolEffect<sup>12+</sup> 200 201Inherits from **SymbolEffect**. 202 203**Widget capability**: This API can be used in ArkTS widgets since API version 12. 204 205**Atomic service API**: This API can be used in atomic services since API version 12. 206 207**System capability**: SystemCapability.ArkUI.ArkUI.Full 208 209### Attributes 210 211| Name| Type| Mandatory| Description | 212| ---- | ---- | ---- | ---- | 213| scope | [EffectScope](#effectscope12) | No | Effect scope.<br>Default value: **EffectScope.LAYER** | 214| direction | [EffectDirection](#effectdirection12) | No | Effect direction.<br>Default value: **EffectDirection.DOWN**| 215 216### constructor<sup>12+</sup> 217 218constructor(scope?: EffectScope, direction?: EffectDirection) 219 220A constructor used to create a **ScaleSymbolEffect** instance, which comes with a scaling animation effect. 221 222**Widget capability**: This API can be used in ArkTS widgets since API version 12. 223 224**Atomic service API**: This API can be used in atomic services since API version 12. 225 226**System capability**: SystemCapability.ArkUI.ArkUI.Full 227 228**Parameters** 229 230| Name| Type| Mandatory| Description | 231| ---- | ---- | ---- | ---- | 232| scope | [EffectScope](#effectscope12) | No | Effect scope.<br>Default value: **EffectScope.LAYER** | 233| direction | [EffectDirection](#effectdirection12) | No | Effect direction.<br>Default value: **EffectDirection.DOWN**| 234 235## HierarchicalSymbolEffect<sup>12+</sup> 236 237Inherits from **SymbolEffect**. 238 239**Widget capability**: This API can be used in ArkTS widgets since API version 12. 240 241**Atomic service API**: This API can be used in atomic services since API version 12. 242 243**System capability**: SystemCapability.ArkUI.ArkUI.Full 244 245### Attributes 246 247| Name| Type| Mandatory| Description | 248| ---- | ---- | ---- | ---- | 249| fillStyle | [EffectFillStyle](#effectfillstyle12) | No | Effect fill style.<br>Default value: **EffectFillStyle.CUMULATIVE**| 250 251### constructor<sup>12+</sup> 252 253constructor(fillStyle?: EffectFillStyle) 254 255A constructor used to create a **HierarchicalSymbolEffect** instance, which comes with a hierarchical animation effect. 256 257**Widget capability**: This API can be used in ArkTS widgets since API version 12. 258 259**Atomic service API**: This API can be used in atomic services since API version 12. 260 261**System capability**: SystemCapability.ArkUI.ArkUI.Full 262 263**Parameters** 264 265| Name| Type| Mandatory| Description | 266| ---- | ---- | ---- | ---- | 267| fillStyle | [EffectFillStyle](#effectfillstyle12) | No | Effect fill style.<br>Default value: **EffectFillStyle.CUMULATIVE**| 268 269## AppearSymbolEffect<sup>12+</sup> 270 271Inherits from **SymbolEffect**. 272 273**Widget capability**: This API can be used in ArkTS widgets since API version 12. 274 275**Atomic service API**: This API can be used in atomic services since API version 12. 276 277**System capability**: SystemCapability.ArkUI.ArkUI.Full 278 279### Attributes 280 281| Name| Type| Mandatory| Description | 282| ---- | ---- | ---- | ---- | 283| scope | [EffectScope](#effectscope12) | No | Effect scope.<br>Default value: **EffectScope.LAYER**| 284 285### constructor<sup>12+</sup> 286 287constructor(scope?: EffectScope) 288 289A constructor used to create an **AppearSymbolEffect** instance, which comes with an appear animation effect. 290 291**Widget capability**: This API can be used in ArkTS widgets since API version 12. 292 293**Atomic service API**: This API can be used in atomic services since API version 12. 294 295**System capability**: SystemCapability.ArkUI.ArkUI.Full 296 297**Parameters** 298 299| Name| Type| Mandatory| Description | 300| ---- | ---- | ---- | ---- | 301| scope | [EffectScope](#effectscope12) | No | Effect scope.<br>Default value: **EffectScope.LAYER**| 302 303## DisappearSymbolEffect<sup>12+</sup> 304 305Inherits from **SymbolEffect**. 306 307**Widget capability**: This API can be used in ArkTS widgets since API version 12. 308 309**Atomic service API**: This API can be used in atomic services since API version 12. 310 311**System capability**: SystemCapability.ArkUI.ArkUI.Full 312 313### Attributes 314 315| Name| Type| Mandatory| Description | 316| ---- | ---- | ---- | ---- | 317| scope | [EffectScope](#effectscope12) | No | Effect scope.<br>Default value: **EffectScope.LAYER**| 318 319### constructor<sup>12+</sup> 320 321constructor(scope?: EffectScope) 322 323A constructor used to create a **DisappearSymbolEffect** instance, which comes with a disappear animation effect. 324 325**Widget capability**: This API can be used in ArkTS widgets since API version 12. 326 327**Atomic service API**: This API can be used in atomic services since API version 12. 328 329**System capability**: SystemCapability.ArkUI.ArkUI.Full 330 331**Parameters** 332 333| Name| Type| Mandatory| Description | 334| ---- | ---- | ---- | ---- | 335| scope | [EffectScope](#effectscope12) | No | Effect scope.<br>Default value: **EffectScope.LAYER**| 336 337## BounceSymbolEffect<sup>12+</sup> 338 339Inherits from **SymbolEffect**. 340 341**Widget capability**: This API can be used in ArkTS widgets since API version 12. 342 343**Atomic service API**: This API can be used in atomic services since API version 12. 344 345**System capability**: SystemCapability.ArkUI.ArkUI.Full 346 347### Attributes 348 349| Name| Type| Mandatory| Description | 350| ---- | ---- | ---- | ---- | 351| scope | [EffectScope](#effectscope12) | No | Effect scope.<br>Default value: **EffectScope.LAYER** | 352| direction | [EffectDirection](#effectdirection12) | No | Effect direction.<br>Default value: **EffectDirection.DOWN**| 353 354### constructor<sup>12+</sup> 355 356constructor(scope?: EffectScope, direction?: EffectDirection) 357 358A constructor used to create a **BounceSymbolEffect** instance, which comes with a bounce animation effect. 359 360**Widget capability**: This API can be used in ArkTS widgets since API version 12. 361 362**Atomic service API**: This API can be used in atomic services since API version 12. 363 364**System capability**: SystemCapability.ArkUI.ArkUI.Full 365 366**Parameters** 367 368| Name| Type| Mandatory| Description | 369| ---- | ---- | ---- | ---- | 370| scope | [EffectScope](#effectscope12) | No | Effect scope.<br>Default value: **EffectScope.LAYER** | 371| direction | [EffectDirection](#effectdirection12) | No | Effect direction.<br>Default value: **EffectDirection.DOWN**| 372 373## ReplaceSymbolEffect<sup>12+</sup> 374 375Inherits from **SymbolEffect**. 376 377**Widget capability**: This API can be used in ArkTS widgets since API version 12. 378 379**Atomic service API**: This API can be used in atomic services since API version 12. 380 381**System capability**: SystemCapability.ArkUI.ArkUI.Full 382 383### Attributes 384 385| Name| Type| Mandatory| Description | 386| ---- | ---- | ---- | ---- | 387| scope | [EffectScope](#effectscope12) | No | Effect scope.<br>Default value: **EffectScope.LAYER**| 388 389### constructor<sup>12+</sup> 390 391constructor(scope?: EffectScope) 392 393A constructor used to create a **ReplaceSymbolEffect** instance, which comes with a replace animation effect. 394 395**Widget capability**: This API can be used in ArkTS widgets since API version 12. 396 397**Atomic service API**: This API can be used in atomic services since API version 12. 398 399**System capability**: SystemCapability.ArkUI.ArkUI.Full 400 401**Parameters** 402 403| Name| Type| Mandatory| Description | 404| ---- | ---- | ---- | ---- | 405| scope | [EffectScope](#effectscope12) | No | Effect scope.<br>Default value: **EffectScope.LAYER**| 406 407## PulseSymbolEffect<sup>12+</sup> 408 409### constructor<sup>12+</sup> 410 411constructor() 412 413A constructor used to create a **PulseSymbolEffect** instance, which comes with a pulse animation effect. 414 415**Widget capability**: This API can be used in ArkTS widgets since API version 12. 416 417**Atomic service API**: This API can be used in atomic services since API version 12. 418 419**System capability**: SystemCapability.ArkUI.ArkUI.Full 420 421## EffectDirection<sup>12+</sup> 422 423**Widget capability**: This API can be used in ArkTS widgets since API version 12. 424 425**Atomic service API**: This API can be used in atomic services since API version 12. 426 427**System capability**: SystemCapability.ArkUI.ArkUI.Full 428 429| Name| Value | Description | 430| ---- | ---- | ---------------- | 431| DOWN | 0 | The symbol scales down and then returns to its original size.| 432| UP | 1 | The symbol scales up and then returns to its original size.| 433 434## EffectScope<sup>12+</sup> 435 436**Widget capability**: This API can be used in ArkTS widgets since API version 12. 437 438**Atomic service API**: This API can be used in atomic services since API version 12. 439 440**System capability**: SystemCapability.ArkUI.ArkUI.Full 441 442| Name | Value | Description | 443| ----- | ---- | ---------- | 444| LAYER | 0 | Layered mode.| 445| WHOLE | 1 | Whole mode.| 446 447## EffectFillStyle<sup>12+</sup> 448 449**Widget capability**: This API can be used in ArkTS widgets since API version 12. 450 451**Atomic service API**: This API can be used in atomic services since API version 12. 452 453**System capability**: SystemCapability.ArkUI.ArkUI.Full 454 455| Name | Value | Description | 456| ---------- | ---- | ---------- | 457| CUMULATIVE | 0 | Cumulative style.| 458| ITERATIVE | 1 | Iterative style.| 459 460## SymbolEffectStrategy<sup>11+</sup> 461 462Enumerates symbol effect types. Once applied, the symbol effect becomes active instantly, eliminating the need for triggering. 463 464**Widget capability**: This API can be used in ArkTS widgets since API version 12. 465 466**Atomic service API**: This API can be used in atomic services since API version 12. 467 468**System capability**: SystemCapability.ArkUI.ArkUI.Full 469 470| Name | Description | 471| ------ | ----------------------------- | 472| NONE | No effect (default value).| 473| SCALE | Scale effect as a whole. | 474| HIERARCHICAL | Hierarchical effect. | 475 476## SymbolRenderingStrategy<sup>11+</sup> 477 478Enumerates the rendering modes. 479 480**Widget capability**: This API can be used in ArkTS widgets since API version 12. 481 482**Atomic service API**: This API can be used in atomic services since API version 12. 483 484**System capability**: SystemCapability.ArkUI.ArkUI.Full 485 486| Name | Description | 487| ------ | ----------------------------- | 488| SINGLE | Single-color mode (default).<br> The default color is black, and one color can be set.<br> If multiple colors are set, only the first color takes effect.| 489| MULTIPLE_COLOR | Multi-color mode.<br> A maximum of three colors can be set. If only one color is set, it updates the color of the first layer, leaving other colors at their default values.<br> The sequence of color settings matches the layering order of the symbol; any colors beyond the number of symbol layers will not take effect.<br> Only color values are accepted. Opacity settings do not take effect.| 490| MULTIPLE_OPACITY | Layered mode.<br> The default color is black, and one color can be set. If multiple colors are set, only the first color takes effect.<br> Opacity is related to the layer, with the first layer at 100%, the second layer at 50%, and the third layer at 20%. | 491 492## Events 493 494The [universal events](ts-universal-events-click.md) are supported. 495 496## Example 497 498### Example 1 499 500```ts 501// xxx.ets 502@Entry 503@Component 504struct Index { 505 build() { 506 Column() { 507 Row() { 508 Column() { 509 Text("Light") 510 SymbolGlyph($r('sys.symbol.ohos_trash')) 511 .fontWeight(FontWeight.Lighter) 512 .fontSize(96) 513 } 514 515 Column() { 516 Text("Normal") 517 SymbolGlyph($r('sys.symbol.ohos_trash')) 518 .fontWeight(FontWeight.Normal) 519 .fontSize(96) 520 } 521 522 Column() { 523 Text("Bold") 524 SymbolGlyph($r('sys.symbol.ohos_trash')) 525 .fontWeight(FontWeight.Bold) 526 .fontSize(96) 527 } 528 } 529 530 Row() { 531 Column() { 532 Text("Single-color mode") 533 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 534 .fontSize(96) 535 .renderingStrategy(SymbolRenderingStrategy.SINGLE) 536 .fontColor([Color.Black, Color.Green, Color.White]) 537 } 538 539 Column() { 540 Text("Multi-color mode") 541 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 542 .fontSize(96) 543 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR) 544 .fontColor([Color.Black, Color.Green, Color.White]) 545 } 546 547 Column() { 548 Text ("Layered mode") 549 SymbolGlyph($r('sys.symbol.ohos_folder_badge_plus')) 550 .fontSize(96) 551 .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY) 552 .fontColor([Color.Black, Color.Green, Color.White]) 553 } 554 } 555 556 Row() { 557 Column() { 558 Text("No effect") 559 SymbolGlyph($r('sys.symbol.ohos_wifi')) 560 .fontSize(96) 561 .effectStrategy(SymbolEffectStrategy.NONE) 562 } 563 564 Column() { 565 Text("Overall scale effect") 566 SymbolGlyph($r('sys.symbol.ohos_wifi')) 567 .fontSize(96) 568 .effectStrategy(1) 569 } 570 571 Column() { 572 Text("Hierarchical effect") 573 SymbolGlyph($r('sys.symbol.ohos_wifi')) 574 .fontSize(96) 575 .effectStrategy(2) 576 } 577 } 578 } 579 } 580} 581``` 582 583 584### Example 2 585 586This example demonstrates the use of the s**ymbolEffec**t attribute in the **SymbolGlyph** component to achieve variable color and replace animation effects. 587 588```ts 589// xxx.ets 590@Entry 591@Component 592struct Index { 593 @State isActive: boolean = true; 594 @State triggerValueReplace: number = 0; 595 replaceFlag: boolean = true; 596 597 build() { 598 Column() { 599 Row() { 600 Column() { 601 Text("Variable Color Animation") 602 SymbolGlyph($r('sys.symbol.ohos_wifi')) 603 .fontSize(96) 604 .symbolEffect(new HierarchicalSymbolEffect(EffectFillStyle.ITERATIVE), this.isActive) 605 Button(this.isActive ? 'Off' : 'Play').onClick(() => { 606 this.isActive = !this.isActive; 607 }) 608 }.margin({right:20}) 609 610 Column() { 611 Text("Replace Animation") 612 SymbolGlyph(this.replaceFlag ? $r('sys.symbol.checkmark_circle') : $r('sys.symbol.repeat_1')) 613 .fontSize(96) 614 .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), this.triggerValueReplace) 615 Button('trigger').onClick(() => { 616 this.replaceFlag = !this.replaceFlag; 617 this.triggerValueReplace = this.triggerValueReplace + 1; 618 }) 619 } 620 } 621 }.margin({ 622 left:30, 623 top:50 624 }) 625 } 626} 627``` 628 629
