ContainerSpan
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.
NOTE
This component is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.
Child Components
This component can contain the <Span> and <ImageSpan> child components.
APIs
ContainerSpan()
Attributes
Only the TextBackgroundStyle attribute is supported.
Name | Type | Description |
---|---|---|
textBackgroundStyle | TextBackgroundStyle | Text background style. Default value: { color: Color.Transparent, radius: 0 } NOTE If this attribute is not separately set for a child component, the child component inherits the settings from the component. |
TextBackgroundStyle
Name | Type | Mandatory | Description |
---|---|---|---|
color | ResourceColor | No | Text background color. |
radius | Dimension | BorderRadiuses | No | Rounded corner radius of the text background. |
Events
The universal events are not supported.
Example
Example 1
// xxx.ets
@Component
@Entry
struct Index {
build() {
Column() {
Text() {
ContainerSpan() {
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: "12vp"})
}
}.width('100%').alignItems(HorizontalAlign.Center)
}
}