1# NodeContainer
2
3The **NodeContainer** component is a basic component that accepts an instance of [NodeController](../js-apis-arkui-nodeController.md) and does not allow child nodes to be appended. It must be used together with **NodeController**.
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> Only custom [FrameNodes](../js-apis-arkui-frameNode.md) or the root FrameNode obtained from a [BuilderNode](../js-apis-arkui-builderNode.md) can be attached to this component.
9> [Proxy nodes](../js-apis-arkui-frameNode.md#ismodifiable12) of built-in system components obtained through querying cannot be attached to this component.
10
11## Child Components
12
13Not supported
14
15## APIs
16
17### NodeContainer
18
19NodeContainer(controller: import('../api/@ohos.arkui.node').NodeController)
20
21**Atomic service API**: This API can be used in atomic services since API version 12.
22
23**System capability**: SystemCapability.ArkUI.ArkUI.Full
24
25**Parameters**
26
27| Name    | Type                                                | Mandatory| Description                                                        |
28| ---------- | ---------------------------------------------------- | ---- | ------------------------------------------------------------ |
29| controller | [NodeController](../js-apis-arkui-nodeController.md) | Yes  | **NodeController** instance used to control the upper and lower tree nodes in the **NodeContainer**. It represents the lifecycle of the **NodeContainer**.|
30
31## Attributes
32
33The [universal attributes](ts-universal-attributes-size.md) are supported.
34
35## Events
36
37The [universal events](ts-universal-events-click.md) are supported.
38
39## Example
40
41```ts
42import { NodeController, BuilderNode, FrameNode, UIContext } from '@kit.ArkUI';
43
44declare class Params {
45  text: string
46}
47
48@Builder
49function buttonBuilder(params: Params) {
50  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly }) {
51    Text(params.text)
52      .fontSize(12)
53    Button(`This is a Button`, { type: ButtonType.Normal, stateEffect: true })
54      .fontSize(12)
55      .borderRadius(8)
56      .backgroundColor(0x317aff)
57  }
58  .height(100)
59  .width(200)
60}
61
62class MyNodeController extends NodeController {
63  private rootNode: BuilderNode<[Params]> | null = null;
64  private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(buttonBuilder);
65
66  makeNode(uiContext: UIContext): FrameNode | null {
67    if (this.rootNode === null) {
68      this.rootNode = new BuilderNode(uiContext);
69      this.rootNode.build(this.wrapBuilder, { text: "This is a Text" })
70    }
71    return this.rootNode.getFrameNode();
72  }
73}
74
75
76@Entry
77@Component
78struct Index {
79  private baseNode: MyNodeController = new MyNodeController()
80
81  build() {
82    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceEvenly }) {
83      Text("This is a NodeContainer contains a text and a button ")
84        .fontSize(9)
85        .fontColor(0xCCCCCC)
86      NodeContainer(this.baseNode)
87        .borderWidth(1)
88        .onClick(() => {
89          console.log("click event");
90        })
91    }
92    .padding({ left: 35, right: 35, top: 35 })
93    .height(200)
94    .width(300)
95  }
96}
97```
98![patternlock](figures/nodeContainer_sample.jpg)
99