PixiJS Layout

Class: Layout

Layout

Container with layout system initiated.

new Layout (options)

Creates layout container.

Name Type Attributes Description
options LayoutOptions <optional>

Example

const layout = new Layout({
	styles: {
		width: 100,
		height: 100,
		background: 'red',
	},
	content: [
		'Hello world',
		{
			id: 'innerLayout1',
			text: 'Inner layout 1',
		},
		{
			id: 'innerLayout2',
			text: 'Inner layout 2',
		},
	],
	globalStyles: {
		innerLayout1: {
			width: 200,
			height: 200,
		},
		innerLayout1: {
			width: 200,
			height: 200,
		},
	},
});

Extends

  • Container

Members

align AlignController

AlignController

content ContentController

ContentController

contentHeight number | undefined

Returns height of the layouts content.

contentWidth number | undefined

Returns with of the layouts content.

height

Set the height of layout.

height

Get the height of layout.

id

ID of layout, can be used to set styles in the globalStyles.

id

ID of layout, can be used to set styles in the globalStyles.

size SizeController

Get SizeController

style Styles

Layout styles.

textStyle Partial<PixiTextStyle>

Layout text styles.

width

Set the width of layout.

width

Get the width of layout.

Methods

addContent (content)

Add content to the layout system and reposition/resize elements basing on styles.

Name Type Description
content Content

Content to be added. Can be string, Container, Layout, LayoutOptions or array of those. Also content can be an object where keys are ids of child layouts to create, and Content as values.

getChildByID (id) Layout | Container | undefined

Get element from the layout system children tree by it's ID

Name Type Description
id string

id of the content to be foundS.
Returns:
Type Description
Layout | Container | undefined

refresh ()

Recalculate positions and sizes of layouts three.

removeChildByID (id)

Remove content from layout system by its id and reposition/resize elements basing on styles.

Name Type Description
id string

id of the content to be removed.

resize (parentWidth, parentHeight)

Resize method should be called on every parent size change.

Name Type Attributes Description
parentWidth number <optional>
parentHeight number <optional>

setStyles (styles)

Updates the layout styles and resize/reposition elements basing on new styles.

Name Type Description
styles Styles