NUI / Components / Scroll, Lists & Data

TileView

ImplementedScroll, Lists & Data

TileView displays repeated data entries as tiles.

Supported as a tiled data view.

Overview

TileView displays repeated data entries as tiles.

When to use

Inventories.
Grids of unlocks.
Image choices.
Card lists.
Item tiles.

Children

Uses data/template fields instead of normal children.

Basic syntax

nui

TileView InventoryTiles {
    items: "wood|Wood|1;stone|Stone|2"
    tileWidth: 96
    tileHeight: 96
}

Supported properties

Property	Type	Required	Default	Description
`items`	string	No	Empty	Inline item data.
`dataSource`	string	No	Empty	Named external data source.
`itemKey`	string	No	Empty	Field or static key binding.
`itemText`	string	No	Empty	Field or static display text binding.
`itemValue`	string	No	Empty	Field or static value binding.
`itemCommand`	string	No	Empty	Command when an item is used or selected.
`selectedKey`	string	No	Empty	Initially selected item key.
`selectionMode`	enum	No	single	Selection mode.
`tileWidth`	number	No	Default	Tile width.
`tileHeight`	number	No	Default	Tile height.
`virtualized`	bool	No	true	Enables virtualization.
`recycleEntries`	bool	No	true	Reuses entry widgets.
`scrollBarVisibility`	enum	No	auto	Scrollbar visibility.
`gap`	number	No	0	Space between tiles.
`width`	number	No	Auto	Desired width.
`height`	number	No	Auto	Desired height.
`visible`	bool	No	true	Visibility flag.

Contextual properties

Contextual property rules

TileView may receive stack, canvas, grid, wrap, or ExpandableArea slot properties only when it is authored as a direct child of the matching parent. It does not support normal authored child nodes.

Full syntax example

nui

TileView InventoryTiles {
    items: "wood|Wood|1;stone|Stone|2"
    itemKey: "id"
    itemText: "name"
    itemValue: "count"
    itemCommand: "SelectItem"
    selectedKey: "wood"
    selectionMode: single
    tileWidth: 96
    tileHeight: 96
    virtualized: true
    recycleEntries: true
    scrollBarVisibility: auto
    gap: 8
    width: 420
    height: 280
    visible: true
}

Limitations

Normal children { ... } blocks are not public syntax for this component.
Drag and drop should not be documented as currently supported.