PixiUI

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. Max width to fit horizontally can be set by maxWidth option, of not set, parent width will be used. Check this example to see how it works: https://pixijs.io/ui/storybook/?path=/story/components-scrollbox-use-graphics--use-graphics

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);

Extends

  • Container

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.

maxWidth

Set width of area to fit elements when arrange. (If not set parent width will be used).

maxWidth number

Get width of area to fit elements when arrange. (If not set parent width will be used).

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.

_maxWidth number protected

Width of area to fit elements when arrange. (If not set parent width will be used).

Default Value:
  • 0

_type ListType protected

Arrange direction. Defaults to 'bidirectional' for multi-column layout when type is not specified.

Default Value:
  • "bidirectional"

arrangeSuspended boolean protected

Set while a batch of children is being added, so the list is arranged once at the end.

Default Value:
  • false

Methods

addItems (items)

Adds items to the list, arranging them once instead of once per item.

childAdded arranges the whole list on every single addChild, which makes adding items one by one quadratic. Use this when adding more than one.

Name Type Description
items C[]

items to add.

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).

arrangeIfNeeded () protected

Arranges children unless a batch add is in progress, which arranges once at the end.

getChildOffset (child) { x : number, y : number } protected

Distance between a child's position and the top left corner of the space it takes up.

It is zero for a plain container, and non-zero for anything positioned by a point inside itself - an anchored Sprite, or a container with a pivot.

Name Type Description
child C

the child to measure.
Returns:
Type Description
{ x : number, y : number } the offset, in this list's coordinate space.