1# NodeContent
2
3The **NodeContent** module implements a manager for **ContentSlot** components in ArkUI.
4
5> **NOTE**
6>
7> The initial APIs of this module are supported since API version 12. Newly added APIs will be marked with a superscript to indicate their earliest API version.
8
9## Modules to Import
10
11```ts
12import {NodeContent } from '@kit.ArkUI'
13```
14
15## NodeContent
16
17### constructor
18
19constructor()
20
21A constructor used to create a **NodeContent** object.
22
23**Atomic service API**: This API can be used in atomic services since API version 12.
24
25**System capability**: SystemCapability.ArkUI.ArkUI.Full
26
27**Example**
28
29<!--code_no_check-->
30
31```ts
32import { nativeNode } from'libNativeNode.so' // so. file implemented by you.
33import {NodeContent } from '@kit.ArkUI'
34
35@Component
36struct Parent {
37    private nodeContent: Content = new NodeContent();
38
39    aboutToAppear() {
40        // Create a node through the C API and add it to the nodeContent manager.
41        nativeNode.createNativeNode(this.nodeContent);
42    }
43
44    build() {
45        Column() {
46            // Display the native components stored in the nodeContent manager.
47            ContentSlot(this.nodeContent)
48        }
49    }
50}
51```
52
53### addFrameNode<sup>12+</sup>
54
55addFrameNode(node: FrameNode): void
56
57Adds a FrameNode to this **NodeContent** object.
58
59**Atomic service API**: This API can be used in atomic services since API version 12.
60
61**System capability**: SystemCapability.ArkUI.ArkUI.Full
62
63**Parameters**
64
65| Name | Type                                                  | Mandatory | Description            |
66| ------- | ------------------------------------------------------ | ---- | ---------------- |
67| node | [FrameNode](./js-apis-arkui-frameNode.md#framenode) | Yes  | FrameNode to add. |
68
69### removeFrameNode<sup>12+</sup>
70
71removeFrameNode(node: FrameNode): void
72
73Removes a FrameNode from this **NodeContent** object.
74
75**Atomic service API**: This API can be used in atomic services since API version 12.
76
77**System capability**: SystemCapability.ArkUI.ArkUI.Full
78
79**Parameters**
80
81| Name | Type                                                  | Mandatory | Description            |
82| ------- | ------------------------------------------------------ | ---- | ---------------- |
83| node | [FrameNode](./js-apis-arkui-frameNode.md#framenode) | Yes  | FrameNode to remove. |
84
85**Example**
86
87```ts
88import {NodeContent, typeNode } from '@kit.ArkUI';
89
90class NodeContentCtrl {
91  content: NodeContent
92  textNode: Array<typeNode.Text> = new Array();
93  uiContext: UIContext
94  width: number
95
96  constructor(uiContext: UIContext) {
97    this.content = new NodeContent()
98    this.uiContext = uiContext
99    this.width = Infinity
100  }
101
102  AddNode() {
103    let node = typeNode.createNode(this.uiContext, "Text")
104    node.initialize("ContentText:" + this.textNode.length).fontSize(20)
105    this.textNode.push(node)
106    this.content.addFrameNode(node)
107  }
108
109  RemoveNode() {
110    let node = this.textNode.pop()
111    this.content.removeFrameNode(node)
112  }
113
114  RemoveFront() {
115    let node = this.textNode.shift()
116    this.content.removeFrameNode(node)
117  }
118
119  GetContent(): NodeContent {
120    return this.content
121  }
122}
123
124@Entry
125@Component
126struct Index {
127  @State message: string = 'Hello World';
128  controller = new NodeContentCtrl(this.getUIContext());
129
130  build() {
131    Row() {
132      Column() {
133        ContentSlot(this.controller.GetContent())
134        Button("AddToSlot")
135          .onClick(() => {
136            this.controller.AddNode()
137          })
138        Button("RemoveBack")
139          .onClick(() => {
140            this.controller.RemoveNode()
141          })
142        Button("RemoveFront")
143          .onClick(() => {
144            this.controller.RemoveFront()
145          })
146      }
147      .width('100%')
148    }
149    .height('100%')
150  }
151}
152```
153