# Panel

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

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

The Panel is a [Container](https://api.playcanvas.com/pcui/classes/Container.md) that itself contains a header container and a content
container. The respective Container functions work using the content container. One can also
append elements to the header of the Panel.

## Constructors

### constructor

```ts
new Panel(args?: Readonly<PanelArgs>)
```

Creates a new Panel.

**Parameters**

- `args` (`Readonly<`[`PanelArgs`](https://api.playcanvas.com/pcui/interfaces/PanelArgs.md)`>`, optional, default `{}`): The arguments. Extends the Container constructor arguments. All settable
  properties can also be set through the constructor.

## Accessors

### collapsed

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

Gets whether the Element should be collapsed.

### collapseHorizontally

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

Gets whether the panel collapses horizontally.

### collapsible

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

Gets whether the Element is collapsible.

### content

```ts
get content(): Container
```

Gets the content container.

### header

```ts
get header(): Container
```

Gets the header container.

### headerSize

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

Gets the height of the header in pixels.

### headerText

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

Gets the header text of the panel.

### removable

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

Gets whether the panel can be removed

### sortable

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

Gets whether the panel can be reordered.

## Events

### EVENT_COLLAPSE

```ts
static readonly EVENT_COLLAPSE: "collapse" = 'collapse'
```

Fired when the panel gets collapsed.

**Example**

```ts
const panel = new Panel();
panel.on('collapse', () => {
    console.log('Panel collapsed');
});
```

### EVENT_EXPAND

```ts
static readonly EVENT_EXPAND: "expand" = 'expand'
```

Fired when the panel gets expanded.

**Example**

```ts
const panel = new Panel();
panel.on('expand', () => {
    console.log('Panel expanded');
});
```

## Inherited from [Container](https://api.playcanvas.com/pcui/classes/Container.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 domContent(): HTMLElement` · `set domContent(value: HTMLElement)`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `get flex(): boolean` · `set flex(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 grid(): boolean` · `set grid(value: boolean)`
- `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 parent(): Element` · `set parent(value: Element)`
- `get readOnly(): boolean` · `set readOnly(value: boolean)`
- `get resizable(): string` · `set resizable(value: string)`
- `get resizeMax(): number` · `set resizeMax(value: number)`
- `get resizeMin(): number` · `set resizeMin(value: number)`
- `get scrollable(): boolean` · `set scrollable(value: boolean)`
- `get style(): CSSStyleDeclaration`
- `get tabIndex(): number` · `set tabIndex(value: number)`
- `get width(): number` · `set width(value: string | number)`
- `protected _buildDomNode(node: DomNode): Element`
- `append(element: Child): void`
- `appendAfter(element: Child, referenceElement: Child): void`
- `appendBefore(element: Child, referenceElement: Child): void`
- `buildDom(dom: DomNode[]): void`
- `clear(): void`
- `flash(): void`
- `forEachChild(fn: (child: Element, index: number) => false | void): void`
- `link(observers: Observer | Observer[], paths: string | string[]): void`
- `move(element: Element, index: number): void`
- `prepend(element: Child): void`
- `remove(element: Element): void`
- `resize(x?: number, y?: number): 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_APPEND: "append" = 'append'`
- `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_REMOVE: "remove" = 'remove'`
- `static readonly EVENT_RESIZE: "resize" = 'resize'`
- `static readonly EVENT_SCROLL: "scroll" = 'scroll'`
- `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)`