• 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-component-general-events.md) are not supported.
60
61## Example
62### Example 1: Setting the Background Style
63
64This example demonstrates how to set the background style for text using **textBackgroundStyle**.
65
66```ts
67// xxx.ets
68@Component
69@Entry
70struct Index {
71  build() {
72    Column() {
73      Text() {
74        ContainerSpan() {
75          ImageSpan($r('app.media.app_icon'))
76            .width('40vp')
77            .height('40vp')
78            .verticalAlign(ImageSpanAlignment.CENTER)
79          Span('   Hello World !   ').fontSize('16fp').fontColor(Color.White)
80        }.textBackgroundStyle({ color: "#7F007DFF", radius: "12vp" })
81      }
82    }.width('100%').alignItems(HorizontalAlign.Center)
83  }
84}
85```
86
87![imagespan](figures/container_span.png)
88
89### Example 2: Setting the Background Style Using attributeModifier
90
91This example demonstrates how to set the background style for text using **attributeModifier**.
92
93```ts
94// xxx.ets
95import { ContainerSpanModifier } from '@ohos.arkui.modifier'
96
97class MyContainerSpanModifier extends ContainerSpanModifier {
98  applyNormalAttribute(instance: ContainerSpanAttribute): void {
99    super.applyNormalAttribute?.(instance);
100    this.textBackgroundStyle({ color: "#7F007DFF", radius: "12vp" })
101  }
102}
103
104@Entry
105@Component
106struct ContainerSpanModifierExample {
107  @State containerSpanModifier: ContainerSpanModifier = new MyContainerSpanModifier()
108
109  build() {
110    Column() {
111      Text() {
112        ContainerSpan() {
113          ImageSpan($r('app.media.app_icon'))
114            .width('40vp')
115            .height('40vp')
116            .verticalAlign(ImageSpanAlignment.CENTER)
117          Span(' I\'m ContainerSpan attributeModifier ').fontSize('16fp').fontColor(Color.White)
118        }.attributeModifier(this.containerSpanModifier as MyContainerSpanModifier)
119      }
120    }.width('100%').alignItems(HorizontalAlign.Center)
121  }
122}
123```
124
125![imagespan](figures/container_attributeModifier.png)
126