# Container

Class · extends [`Element`](https://api.playcanvas.com/pcui/classes/Element.md)

Source: https://github.com/playcanvas/pcui/blob/77ed2b8ba8660c9644049b0d1942652721e7a6c4/src/components/Container/index.ts#L62

A container is the basic building block for [Element](https://api.playcanvas.com/pcui/classes/Element.md)s that are grouped together. A
container can contain any other element including other containers.

## Constructors

### constructor

```ts
new Container(args?: Readonly<ContainerArgs>)
```

Creates a new Container.

**Parameters**

- `args` (`Readonly<`[`ContainerArgs`](https://api.playcanvas.com/pcui/interfaces/ContainerArgs.md)`>`, optional, default `{}`): The arguments.

## Accessors

### domContent

```ts
get domContent(): HTMLElement
set domContent(value: HTMLElement)
```

Gets the internal DOM element used as a the container of all children.

### flex

```ts
get flex(): boolean
set flex(value: boolean)
```

Gets whether the Element supports flex layout.

### grid

```ts
get grid(): boolean
set grid(value: boolean)
```

Gets whether the Element supports the grid layout.

### resizable

```ts
get resizable(): string
set resizable(value: string)
```

Gets whether the Element is resizable and where the resize handle is located.

### resizeMax

```ts
get resizeMax(): number
set resizeMax(value: number)
```

Gets the maximum size the Element can take when resized in pixels.

### resizeMin

```ts
get resizeMin(): number
set resizeMin(value: number)
```

Gets the minimum size the Element can take when resized in pixels.

### scrollable

```ts
get scrollable(): boolean
set scrollable(value: boolean)
```

Gets whether the Element should be scrollable.

## Methods

### _buildDomNode

```ts
protected _buildDomNode(node: DomNode): Element
```

If the current node contains a root, recursively append its children to this node
and return it. Otherwise return the current node. Also add each child to the parent
under its keyed name.

**Parameters**

- `node` (`DomNode`): The current element in the dom structure which must be recursively
  traversed and appended to its parent.

**Returns** [`Element`](https://api.playcanvas.com/pcui/classes/Element.md): The recursively appended element node.

### append

```ts
append(element: Child): void
```

Appends an element to the container.

**Parameters**

- `element` (`Child`): The element to append.

### appendAfter

```ts
appendAfter(element: Child, referenceElement: Child): void
```

Appends an element to the container just after the specified reference element.

**Parameters**

- `element` (`Child`): The element to append.
- `referenceElement` (`Child`): The element after which the element will be appended.

### appendBefore

```ts
appendBefore(element: Child, referenceElement: Child): void
```

Appends an element to the container before the specified reference element.

**Parameters**

- `element` (`Child`): The element to append.
- `referenceElement` (`Child`): The element before which the element will be appended.

### buildDom

```ts
buildDom(dom: DomNode[]): void
```

Takes an array of pcui elements, each of which can contain their own child elements, and
appends them to this container. These child elements are traversed recursively using
_buildDomNode.

**Parameters**

- `dom` (`DomNode[]`): An array of child pcui elements to append to this container.

**Example**

```ts
buildDom([
    {
        child1: pcui.Label()
    },
    {
        root: {
            container1: pcui.Container()
        },
        children: [
            {
                child2: pcui.Label()
            },
            {
                child3: pcui.Label()
            }
        ]
    }
]);
```

### clear

```ts
clear(): void
```

Clears all children from the container.

### destroy

```ts
destroy(): void
```

Destroys the Element and its events.

### forEachChild

```ts
forEachChild(fn: (child: Element, index: number) => false | void): void
```

Iterate over each child element using the supplied function. To early out of the iteration,
return `false` from the function.

**Parameters**

- `fn` (`(child: Element, index: number) => false | void`): The function to call for each child element.

### move

```ts
move(element: Element, index: number): void
```

Moves the specified child at the specified index.

**Parameters**

- `element` ([`Element`](https://api.playcanvas.com/pcui/classes/Element.md)): The element to move.
- `index` (`number`): The index to move the element to.

### prepend

```ts
prepend(element: Child): void
```

Inserts an element in the beginning of the container.

**Parameters**

- `element` (`Child`): The element to prepend.

### remove

```ts
remove(element: Element): void
```

Removes the specified child element from the container.

**Parameters**

- `element` ([`Element`](https://api.playcanvas.com/pcui/classes/Element.md)): The element to remove.

### resize

```ts
resize(x?: number, y?: number): void
```

Resize the container.

**Parameters**

- `x` (`number`, optional, default `0`): The number of pixels to resize the width.
- `y` (`number`, optional, default `0`): The number of pixels to resize the height.

## Events

### EVENT_APPEND

```ts
static readonly EVENT_APPEND: "append" = 'append'
```

Fired when a child Element gets added to the Container.

**Example**

```ts
const container = new Container();
container.on('append', (element: Element) => {
    console.log('Element added to container:', element);
});
```

### EVENT_REMOVE

```ts
static readonly EVENT_REMOVE: "remove" = 'remove'
```

Fired when a child Element gets removed from the Container.

**Example**

```ts
const container = new Container();
container.on('remove', (element: Element) => {
    console.log('Element removed from container:', element);
});
```

### EVENT_RESIZE

```ts
static readonly EVENT_RESIZE: "resize" = 'resize'
```

Fired when the container gets resized using the resize handle.

**Example**

```ts
const container = new Container();
container.on('resize', () => {
    console.log('Container resized to:', container.width, container.height, 'px');
});
```

### EVENT_SCROLL

```ts
static readonly EVENT_SCROLL: "scroll" = 'scroll'
```

Fired when the container is scrolled. The native DOM scroll event is passed to the event handler.

**Example**

```ts
const container = new Container();
container.on('scroll', (event: Event) => {
    console.log('Container scrolled:', event);
});
```

## Inherited from [Element](https://api.playcanvas.com/pcui/classes/Element.md)

- `get alignItems(): string` · `set alignItems(value: string)`
- `get alignSelf(): string` · `set alignSelf(value: string)`
- `get binding(): BindingBase` · `set binding(value: BindingBase)`
- `get class(): DOMTokenList`
- `get dom(): HTMLElement`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `get flexBasis(): string` · `set flexBasis(value: string | number)`
- `get flexDirection(): string` · `set flexDirection(value: string)`
- `get flexGrow(): string` · `set flexGrow(value: string | number)`
- `get flexShrink(): string` · `set flexShrink(value: string | number)`
- `get flexWrap(): string` · `set flexWrap(value: string)`
- `get height(): number` · `set height(value: string | number)`
- `get hidden(): boolean` · `set hidden(value: boolean)`
- `get hiddenToRoot(): boolean`
- `get ignoreParent(): boolean` · `set ignoreParent(value: boolean)`
- `get justifyContent(): string` · `set justifyContent(value: string)`
- `get justifySelf(): string` · `set justifySelf(value: string)`
- `get readOnly(): boolean` · `set readOnly(value: boolean)`
- `get style(): CSSStyleDeclaration`
- `get tabIndex(): number` · `set tabIndex(value: number)`
- `get width(): number` · `set width(value: string | number)`
- `flash(): void`
- `link(observers: Observer | Observer[], paths: string | string[]): void`
- `unlink(): void`
- `static create<Type extends Element>(type: string, args: ElementArgs): Type`
- `static register<Type extends Element>(type: string, cls: Object, defaultArguments?: object): void`
- `static unregister(type: string): void`
- `static readonly EVENT_CLICK: "click" = 'click'`
- `static readonly EVENT_DESTROY: "destroy" = 'destroy'`
- `static readonly EVENT_DISABLE: "disable" = 'disable'`
- `static readonly EVENT_ENABLE: "enable" = 'enable'`
- `static readonly EVENT_HIDE: "hide" = 'hide'`
- `static readonly EVENT_HIDE_TO_ROOT: "hideToRoot" = 'hideToRoot'`
- `static readonly EVENT_HOVER: "hover" = 'hover'`
- `static readonly EVENT_HOVER_END: "hoverend" = 'hoverend'`
- `static readonly EVENT_PARENT: "parent" = 'parent'`
- `static readonly EVENT_READ_ONLY: "readOnly" = 'readOnly'`
- `static readonly EVENT_SHOW: "show" = 'show'`
- `static readonly EVENT_SHOW_TO_ROOT: "showToRoot" = 'showToRoot'`

## Inherited from [VectorInput](https://api.playcanvas.com/pcui/classes/VectorInput.md)

- `get error(): boolean` · `set error(value: boolean)`
- `get parent(): Element` · `set parent(value: Element)`