Automatic grid

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

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

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.