SymbolSpan

As a child component of the <Text> component, the <SymbolSpan> component is used to display small icons.

NOTE

This component is supported since API version 11. It 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 (if any) of the attribute from its parent component. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Not supported

APIs

SymbolSpan(value: Resource)

Parameters

Name Type Mandatory Description
value Resource Yes Resource of the <SymbolSpan> component, for example, $r('sys.symbol.ohos_wifi').

NOTE

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.

Attributes

The universal attributes are not supported. Only the following attributes are supported.

Name Type Mandatory Description
fontColor Array<ResourceColor> No Color of the symbol span.
Default value: depending on the rendering strategy.
fontSize number | string | Resource No Size of the symbol span.
Default value: system default value
fontWeight FontWeight | number | string No Weight of 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.
Default value: FontWeight.Normal
renderingStrategy SymbolRenderingStrategy No Rendering strategy of symbol span.
Default value: SymbolRenderingStrategy.SINGLE
NOTE
For the resources referenced in $r('sys.symbol.ohos_*'), only ohos_trash_circle, ohos_folder_badge_plus, and ohos_lungs support the MULTIPLE_COLOR modes.
effectStrategy SymbolEffectStrategy No Symbol effect of symbol span.
Default value: SymbolEffectStrategy.NONE
NOTE
For the resources referenced in $r('sys.symbol.ohos_*'), only ohos_wifi supports the hierarchical effect.

The figure shows the default color and number of layers of each component in multi-color mode.

renderingStrategy

Events

The universal events are not supported.

Example

// xxx.ets
@Entry
@Component
struct Index {
  @State scaleplay:boolean = false
  @State hieraplay:boolean = false
  build() {
    Column() {
      Row() {
        Column(){
          Text ("Lighter")
          Text(){
            SymbolSpan($r('sys.symbol.ohos_lungs'))
              .fontWeight(FontWeight.Lighter)
              .fontSize(96)
          }
        }
        Column(){
          Text ("Normal")
          Text(){
            SymbolSpan($r('sys.symbol.ohos_lungs'))
              .fontWeight(FontWeight.Normal)
              .fontSize(96)
          }
        }
        Column(){
          Text ("Bold")
          Text(){
            SymbolSpan($r('sys.symbol.ohos_lungs'))
              .fontWeight(FontWeight.Bold)
              .fontSize(96)
          }
        }
      }

      Row() {
        Column(){
          Text ("Monochrome")
          Text(){
            SymbolSpan($r('sys.symbol.ohos_lungs'))
              .fontSize(96)
              .renderingStrategy(SymbolRenderingStrategy.SINGLE)
              .fontColor([Color.Blue,Color.Grey,Color.Green])
          }
        }
        Column(){
          Text ("Multicolor")
          Text(){
            SymbolSpan($r('sys.symbol.ohos_lungs'))
              .fontSize(96)
              .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_COLOR)
              .fontColor([Color.Blue,Color.Grey,Color.Green])
          }
        }
        Column(){
          Text ("Multi-opacity")
          Text(){
            SymbolSpan($r('sys.symbol.ohos_lungs'))
              .fontSize(96)
              .renderingStrategy(SymbolRenderingStrategy.MULTIPLE_OPACITY)
              .fontColor([Color.Blue,Color.Grey,Color.Green])
          }
        }
      }
      Row() {
        Column(){
          Text ("No effect")
          Text() {
            SymbolSpan($r('sys.symbol.ohos_wifi'))
              .fontSize(96)
              .effectStrategy(SymbolEffectStrategy.NONE)
          }
        }
        Column(){
          Text ("Overall scale effect")
          Text(){
            SymbolSpan($r('sys.symbol.ohos_wifi'))
              .fontSize(96)
              .effectStrategy(this.scaleplay ? 1 : 0)
          }
          Button(this.scaleplay? 'Off':'Play').onClick(()=>{this.scaleplay = !this.scaleplay})
        }
        Column(){
          Text ("Hierarchical effect")
          Text(){
            SymbolSpan($r('sys.symbol.ohos_wifi'))
              .fontSize(96)
              .effectStrategy(this.hieraplay ? 2 : 0)
          }
          Button(this.hieraplay? 'Off':'Play').onClick(()=>{this.hieraplay = !this.hieraplay})
        }
      }
    }
  }
}

SymbolSpan