PixiJS UI

Class: List

List

Container-based component for arranging Pixi containers one after another based on their sizes.

Type option is used to set the direction of the arrangement.

If type is not specified, it will be acting like a bidirectional, items will be arranged to fit horizontally, after there is no space left, new line will be started, so items will be arranged like inline-block in css.

It is used inside elements with repeatable content, like Select or ScrollBox.

Example

 const list = new List({
    children: [
        new Graphics().rect(0, 0, 50, 50).fill(0x000000),
        new Graphics().rect(0, 0, 50, 50).fill(0xFFFFFF),
    ],
 });

 list.addChild(new Graphics().rect(0, 0, 50, 50)).fill(0x000000);

Members

bottomPadding

Set bottom padding.

bottomPadding number

Get bottom padding.

children C[] readonly

Returns all arranged elements.

elementsMargin

Set element margin.

elementsMargin number

Get element margin.

horPadding

Set horizontal padding, overriding all left and right padding options.

horPadding number

Get horizontal padding.

leftPadding

Set left padding.

leftPadding number

Get left padding.

padding

Set padding, overriding all padding options.

padding number

Get padding.

rightPadding

Set right padding.

rightPadding number

Get right padding.

topPadding

Set top padding.

topPadding number

Get top padding.

type

Set items arrange direction.

type ListType

Get items arrange direction.

vertPadding

Set vertical padding, overriding all top and bottom padding options.

vertPadding number

Get vertical padding.

view Container

Container, that holds all inner elements.

_type ListType protected

Arrange direction.

Methods

arrangeChildren ()

Arrange all elements basing in their sizes and component options. Can be arranged vertically, horizontally or bidirectional.

init (options)

Initiates list component.

Name	Type	Attributes	Description
`options`	{ type? : ListType } & C<ListOptions>	<optional>

removeItem (itemID)

Removes items from the list. (Does not destroy them)

Name	Type	Description
`itemID`	number	Item to remove (starting from 0).