• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# ContainerSpan
2
3As a child of the [Text](ts-basic-components-text.md) component, the **ContainerSpan** component is used to manage the background colors and rounded corners of multiple [Span](ts-basic-components-span.md) and [ImageSpan](ts-basic-components-imagespan.md) components in a unified manner.
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
11This component can contain the [Span](ts-basic-components-span.md) and [ImageSpan](ts-basic-components-imagespan.md) child components.
12
13## APIs
14
15ContainerSpan()
16
17**Atomic service API**: This API can be used in atomic services since API version 12.
18
19**System capability**: SystemCapability.ArkUI.ArkUI.Full
20
21## Attributes
22
23Only the following attributes are supported.
24
25### textBackgroundStyle
26
27textBackgroundStyle(style: TextBackgroundStyle)
28
29Sets the text background style If this attribute is not separately set for a child component, the child component inherits the settings from the component.
30
31**Atomic service API**: This API can be used in atomic services since API version 12.
32
33**System capability**: SystemCapability.ArkUI.ArkUI.Full
34
35**Parameters**
36
37| Name| Type                                               | Mandatory| Description                                                        |
38| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
39| style  | [TextBackgroundStyle](ts-basic-components-span.md#textbackgroundstyle11) | Yes  | Text background style.<br>Default value:<br>{<br>  color: Color.Transparent,<br>  radius: 0<br>} |
40
41### attributeModifier<sup>12+</sup>
42
43attributeModifier(modifier: AttributeModifier\<ContainerSpanAttribute>)
44
45Creates an attribute modifier.
46
47**Atomic service API**: This API can be used in atomic services since API version 12.
48
49**System capability**: SystemCapability.ArkUI.ArkUI.Full
50
51**Parameters**
52
53| Name| Type                                               | Mandatory| Description                                                        |
54| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
55| modifier  | [AttributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifiert)\<ContainerSpanAttribute> | Yes  | Modifier for dynamically setting attributes on the current component.|
56
57## Events
58
59The [universal events](ts-universal-events-click.md) are not supported.
60
61## Example
62
63```ts
64// xxx.ets
65@Component
66@Entry
67struct Index {
68  build() {
69    Column() {
70      Text() {
71        ContainerSpan() {
72          ImageSpan($r('app.media.app_icon'))
73            .width('40vp')
74            .height('40vp')
75            .verticalAlign(ImageSpanAlignment.CENTER)
76          Span('   Hello World !   ').fontSize('16fp').fontColor(Color.White)
77        }.textBackgroundStyle({color: "#7F007DFF", radius: "12vp"})
78      }
79    }.width('100%').alignItems(HorizontalAlign.Center)
80  }
81}
82```
83
84![imagespan](figures/container_span.png)
85