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.
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})
}
}
}
}
}