The automatic-grid is part of the Gameface custom components suite. As most of the components in this suite it uses slots to allow dynamic content.

Installation

npm i coherent-gameface-automatic-grid

Usage with UMD:

<script src="./node_modules/coherent-gameface-automatic-grid/dist/automatic-grid.production.min.js"></script>

• add the automatic-grid component to your html:

<gameface-automatic-grid></gameface-automatic-grid>

This is all! Load the file in Gameface to see the automatic-grid.

Usage with JavaScript:

If you wish to import the AutomaticGrid using JavaScript you can remove the script tag and import it like this:

import { AutomaticGrid } from 'coherent-gameface-automatic-grid';

or simply

import 'coherent-gameface-automatic-grid';

Note that this approach requires a module bundler like Webpack or Rollup to resolve the modules from the node_modules folder.

Add the styles

<link rel="stylesheet" href="coherent-gameface-components-theme.css">
<link rel="stylesheet" href="grid.production.min.css">
<link rel="stylesheet" href="style.css">

To overwrite the default styles, simply create new rules for the class names that you wish to change and include them after the default styles.

Load the HTML file in Gameface to see the automatic-grid.

How to use

To use the automatic-grid component add the following element to your html

<gameface-automatic-grid class="automatic-grid-component"></gameface-automatic-grid>

To add items to your grid you need to add componet-slot elements to the grid

<gameface-automatic-grid class="automatic-grid-component">
    <component-slot data-name="item">Automatic Grid</component-slot>
</gameface-automatic-grid>

You can use the following attributes to customize the automatic-grid

|Attribute |Type |Default | Description |Notes | |---|---|---|---|---| |columns | Number |6 | The number of columns the grid has | The maximum number of columns is 12 | |rows | Number |5 | The number of rows the grid has | | |draggable | Boolean |false | If you can drag and drop items in the grid | |

Apart from that you can add the following attributes to the component-slot

|Attribute |Type |Default | Description |Notes | |---|---|---|---|---| |col | Number |none | The column the item is on | | |row | Number |none | The row the item is on | |

Using with data-binding

If you want to iterate a list of items from a model in the automatic-grid, you can do the following in your JS:

engine.whenReady.then(() => {
    const grid = document.querySelector('gameface-automatic-grid');
    
    grid.addItemsToCells();
});

This will distribute the items from the model in the grid.