## Demos * [GridView](https://iamchristopher.github.io/phaser-plugin-list-view/grid.html) * [ListView](https://iamchristopher.github.io/phaser-plugin-list-view/list.html)
npm i phaser-plugin-list-view -S
Then add to your game config:
js
import ListViewPlugin from 'phaser-plugin-list-view';new Phaser.Game({
plugins: [
scene: [
{
key: 'ListView',
plugin: ListViewPlugin,
start: true
}
]
]
});
`Basic Usage
The plugin registers a new custom that is available from within your scenes:
`js
const listItems = new Array(15)
.fill()
.map((_, i) =>
this.add.text(0, 0, Item #${i} (x1), {
fontSize: 20,
fontFamily: 'Arial'
})
.setPadding({ bottom: 12 })
);const listview = this.add.listview(0, 0, 200, 400)
.on('pointerdown', (item, i, items) => console.log(
Item #${i} was clicked))
.add(listItems);
`API
$3
#### Arguments
* child (GameObject|GameObject[]) — The child to add to the bottom of the listReturns a
object.$3
#### Arguments
* item (GameObject) — The child to removeReturns a
ListView object.$3
#### Arguments
* index (Number) — The index of the child to removeReturns a
ListView object.$3
#### Arguments
* config (Boolean|Object) — Can either be a Boolean specifying if a scrollbar should be rendered or an Object containing the following optional properties:
* alpha (Number) — The alpha to render the scrollbar
* colour — The colour to render the scrollbar
* hideWhenEmpty (Boolean) — Sets whether the scrollbar should be visible when there are no items to display. Default value is false
* width (Number) — The width to render the scrollbarReturns a
object.$3
#### Arguments
* event (String) — Any Phaser v3 GameObject event (ie, pointerdown) that will be attached to each list item. Refer to the documentation for details
* fn(item, index, items) (Function) — The callback function for the eventReturns a
ListView object.$3
Updates children positions after a mutation occurs. Primarily used for internal operations but is available to you for special occasions.Returns a
ListView object.Limitations
This plugin utilizes Phaser's GameObject exclusion to create the scrolling effect. As of this writing, Phaser only supports 31 unique cameras before being unable to support GameObject exclusion. This means that your game can only contain a limited amount of ListViews` (31 minus however many cameras you've added yourself).