FlexContainer

import { FlexContainer } from 'pixi-silk/ui/layout';

A container that lays out its children with flexbox. Give a child a style with FlexContainer.setLayout (or add it with FlexContainer.add). The container places it in its slot once per frame, and only after something changed: a child added, removed or restyled, a new size, or FlexContainer.invalidate.

Children are measured by their local bounds, or by a style’s measure. A FlexContainer inside another one joins its parent’s layout tree as a nested flex container. With transition, children glide to new slots on springs. An idle container costs nothing per frame.

Extends#

Container

Extended by#

Constructors#

Constructor#

new FlexContainer(options?: FlexContainerOptions): FlexContainer;

Parameters#

Parameter	Type
`options`	`FlexContainerOptions`

Returns#

FlexContainer

Overrides#

Container.constructor

Properties#

Property	Modifier	Type	Description	Defined in
`node`	`readonly`	`LayoutNode`<`Container`<`ContainerChild`>>	The layout node of this container. A nested FlexContainer’s node sits in its parent’s tree.	ui/layout/flex-container.ts:182

Accessors#

area#

Get Signature#

get area(): Size;

The root’s layout area, from the last pass when it has no fixed size.

Returns

Size

layoutStyle#

Get Signature#

get layoutStyle(): SmartLayout;

The container’s own flex style.

Returns

SmartLayout

orientation#

Get Signature#

get orientation(): "portrait" | "landscape";

The orientation of the root’s layout area. A square counts as landscape.

Returns

"portrait" | "landscape"

Methods#

add()#

add<T extends ContainerChild>(child: T, style?: SmartLayout): T;

Adds child with a layout style. Returns the child.

Type Parameters#

Type Parameter
`T` extends `ContainerChild`

Parameters#

Parameter	Type
`child`	`T`
`style`	`SmartLayout`

Returns#

T

destroy()#

destroy(options?: DestroyOptions): void;

Stops the layout loop. Pass { children: true } to destroy the children too.

Parameters#

Parameter	Type
`options?`	`DestroyOptions`

Returns#

void

Overrides#

Container.destroy

getLayout()#

getLayout(child: Container): SmartLayout;

The layout style of child, or {} when it has none.

Parameters#

Parameter	Type
`child`	`Container`

Returns#

SmartLayout

invalidate()#

invalidate(child?: Container<ContainerChild>): this;

Lays out again on the next frame. Pass a child whose content changed (new text, a new texture) so it is measured again.

Parameters#

Parameter	Type
`child?`	`Container`<`ContainerChild`>

Returns#

this

resize()#

resize(width: number, height: number): this;

Root only: lays out in an area of this size, in local units. Without it the root sizes to its content.

Parameters#

Parameter	Type
`width`	`number`
`height`	`number`

Returns#

this

setLayout()#

setLayout(child: Container, style: SmartLayout): this;

Gives child a layout style, replacing the old one. It need not be a child yet.

Parameters#

Parameter	Type
`child`	`Container`
`style`	`SmartLayout`

Returns#

this

setStyle()#

setStyle(style: SmartLayout): this;

Replaces the container’s own flex style and lays out on the next frame.

Parameters#

Parameter	Type
`style`	`SmartLayout`

Returns#

this

slotOf()#

slotOf(child: Container): 
  | {
  height: number;
  width: number;
  x: number;
  y: number;
}
  | undefined;

A copy of the slot child got in the last pass, in this container’s space. Undefined for a child without a style.

Parameters#

Parameter	Type
`child`	`Container`

Returns#

| { height: number; width: number; x: number; y: number; } | undefined

tick()#

tick(dt: number): boolean;

Advances layout and transitions by dt seconds (only needed with ticker: null). Returns true while busy.

Parameters#

Parameter	Type
`dt`	`number`

Returns#

boolean

updateLayout()#

updateLayout(): this;

Lays out the whole tree now, from its root, instead of on the next frame.

Returns#

this