# LayoutGroupComponentElement

Class · extends [`ComponentElement`](https://api.playcanvas.com/web-components/classes/ComponentElement.md)`<LayoutGroupComponent>` · category: Components

Source: https://github.com/playcanvas/web-components/blob/252f001881302c266c8d727044408c32be2bb5e7/src/components/layout-group-component.ts#L43

The LayoutGroupComponentElement interface provides properties and methods for manipulating
[`<pc-layout-group>`](https://developer.playcanvas.com/user-manual/web-components/tags/pc-layout-group/) elements.
The LayoutGroupComponentElement interface also inherits the properties and methods of the
[HTMLElement](https://developer.mozilla.org/docs/Web/API/HTMLElement) interface.

Engine component: [LayoutGroupComponent](https://api.playcanvas.com/engine/classes/LayoutGroupComponent.html) (`layoutgroup`).

**elementSummary** The `<pc-layout-group>` element arranges its entity's children in a row or
column, with spacing, padding, alignment and fitting. Must be a child of a `<pc-entity>`,
`<pc-model>` or `<pc-node>`.

## Accessors

### alignment

```ts
get alignment(): Vec2
set alignment(value: Vec2)
```

Gets the alignment of the child elements.

### component

```ts
get component(): LayoutGroupComponent | null
```

Gets the underlying PlayCanvas layout group component. `null` until the element is
ready — see [ComponentElement.component](https://api.playcanvas.com/web-components/classes/ComponentElement.md#component).

### heightFitting

```ts
get heightFitting(): "none" | "stretch" | "shrink" | "both"
set heightFitting(value: "none" | "stretch" | "shrink" | "both")
```

Gets the fitting mode along the vertical axis.

### orientation

```ts
get orientation(): "horizontal" | "vertical"
set orientation(value: "horizontal" | "vertical")
```

Gets the orientation of the layout group.

### padding

```ts
get padding(): Vec4
set padding(value: Vec4)
```

Gets the padding around the layout group.

### reverseX

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

Gets whether the order of children is reversed along the horizontal axis.

### reverseY

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

Gets whether the order of children is reversed along the vertical axis.

### spacing

```ts
get spacing(): Vec2
set spacing(value: Vec2)
```

Gets the spacing between child elements.

### widthFitting

```ts
get widthFitting(): "none" | "stretch" | "shrink" | "both"
set widthFitting(value: "none" | "stretch" | "shrink" | "both")
```

Gets the fitting mode along the horizontal axis.

### wrap

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

Gets whether children wrap onto a new line/column when they overflow the group.

## Methods

### getInitialComponentData

```ts
protected getInitialComponentData(): { alignment: Vec2; heightFitting: number | undefined; orientation: number | undefined; padding: Vec4; reverseX: boolean; reverseY: boolean; spacing: Vec2; widthFitting: number | undefined; wrap: boolean }
```

Returns the data the component is created with. Overridden by subclasses to supply the
initial values of their cached properties. The element's `enabled` state is not among them:
the base class adds it when it creates the component.

**Returns** `{ alignment: Vec2; heightFitting: number | undefined; orientation: number | undefined; padding: Vec4; reverseX: boolean; reverseY: boolean; spacing: Vec2; widthFitting: number | undefined; wrap: boolean }`: The initial component data.

## Inherited from [ComponentElement](https://api.playcanvas.com/web-components/classes/ComponentElement.md)

- `get closestApp(): AppElement | null`
- `get closestEntity(): EntityBaseElement | null`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `protected _onReady(): void`
- `protected _resetReady(): void`
- `protected initComponent(): void`
- `ready(): Promise<LayoutGroupComponentElement>`