As a child of the Text component, the ContainerSpan component is used to manage the background colors and rounded corners of multiple Span and ImageSpan components in a unified manner.
This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.
APIs
ContainerSpan()
Atomic service API: This API can be used in atomic services since API version 12.
System capability: SystemCapability.ArkUI.ArkUI.Full
[h2]textBackgroundStyle
textBackgroundStyle(style: TextBackgroundStyle)
Sets the text background style. If this attribute is not separately set for a child component, the child component inherits the settings from the component.
Atomic service API: This API can be used in atomic services since API version 12.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| style | TextBackgroundStyle | Yes | Text background style. Default value: { color: Color.Transparent, radius: 0 } |
[h2]attributeModifier12+
attributeModifier(modifier: AttributeModifier<ContainerSpanAttribute>)
Creates an attribute modifier.
Atomic service API: This API can be used in atomic services since API version 12.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| modifier | AttributeModifier<ContainerSpanAttribute> | Yes | Modifier for dynamically setting attributes on the current component. |
[h2]Example 1: Setting the Background Style
This example demonstrates how to set the background style for text using the textBackgroundStyle attribute, available since API version 11.
// xxx.ets
@Component
@Entry
struct Index {
build() {
Column() {
Text() {
ContainerSpan() {
// Replace $r('app.media.app_icon') with the image resource file you use.
ImageSpan($r('app.media.app_icon'))
.width('40vp')
.height('40vp')
.verticalAlign(ImageSpanAlignment.CENTER)
Span(' Hello World ! ').fontSize('16fp').fontColor(Color.White)
}
.textBackgroundStyle({
color: "#7F007DFF",
radius: {
topLeft: 12,
topRight: 12,
bottomLeft: 12,
bottomRight: 12
}
})
}
}.width('100%').alignItems(HorizontalAlign.Center)
}
} 
[h2]Example 2: Setting the Background Style Using attributeModifier
This example demonstrates how to set the background style for text using the attributeModifier attribute, available since API version 12.
import { ContainerSpanModifier } from '@kit.ArkUI';
class MyContainerSpanModifier extends ContainerSpanModifier {
applyNormalAttribute(instance: ContainerSpanAttribute): void {
super.applyNormalAttribute?.(instance);
this.textBackgroundStyle({ color: "#7F007DFF", radius: "12vp" });
}
}
@Entry
@Component
struct ContainerSpanModifierExample {
@State containerSpanModifier: ContainerSpanModifier = new MyContainerSpanModifier();
build() {
Column() {
Text() {
ContainerSpan() {
// Replace $r('app.media.startIcon') with the image resource file you use.
ImageSpan($r('app.media.startIcon'))
.width('40vp')
.height('40vp')
.verticalAlign(ImageSpanAlignment.CENTER)
Span(' I\'m ContainerSpan attributeModifier ').fontSize('16fp').fontColor(Color.White)
}.attributeModifier(this.containerSpanModifier as MyContainerSpanModifier)
}
}.width('100%').alignItems(HorizontalAlign.Center)
}
} 