Tiles

The tiles component displays a list of complex objects as a series of individual tiles.

Building

Displaying

The first defined column will be displayed as the tile heading, the second defined column is displayed as a paragraph in the body of each tile. All other columns will be displayed at the bottom of the tile, using a “Label: Content” format.

Outcomes

Outcomes associated with the tiles component will be displayed at the bottom of each tile. Each outcome’s width is distributed evenly, i.e. a single outcome would fill the entire width, but two outcomes would be split 50% each.

If any Delete outcomes are found, they will be displayed in the top-right corner of the tile.

Bulk Actions

If an outcome is defined as a bulk action, it will be displayed above the tiles and will operate on any selected item(s).

Attributes

Key Value Description
classes string Custom class names that will be added to the mw-tiles element
pagination boolean Whether to enable pagination, if the table is bound to a list of items
paginationSize number Sets the number of items displayed on each page, if supported by the service the tiles are loading data from. Set to 0 to display all items.
noResults string A custom message that will be displayed if no results are found

Options

Pagination

By default, pagination is disabled for any tiles populated from a list value. You can enable pagination, by setting the pagination attribute to true.

The number of items per page can be adjusted by using the component’s paginationSize attribute, which takes an integer value. The page size can also be adjusted globally, for all components by using the paging.select setting in your player, which is set to 250 by default.

Searching can be enabled on tiles, which means if the component is populated from a list, the search will query every visible column, but if the component is populated from a service, the querying is dependent on the service implementation.

Size

By default each tile is displayed as a 300x300px square, but this can be changed by overriding the mw-tiles-item-container class.

Examples