Adding and Configuring Groups - resoai/TileBoard GitHub Wiki

What is a Group?

Groups are containers that have tiles inside of them, so Tileboard contains pages, pages contain groups, and groups contain tiles. There can be many groups inside of a page, similarly, there can be many pages inside of Tileboard.

To configure a group you will need to assign it the following:

  • A title/name of the group
  • The width of the group in the number of tiles.
  • The height of the group in the number of tiles.

Basic Group Configuration

groups: [
  {
    title: 'Group title',
    width: 2,
    height: 3,
    items: [],
  }
]

Configuration Variables

  • title = The title of the group. This is displayed at the top of the group
  • width = The width of the group. This number tells tileboard how many tiles wide should the group be.
  • height = The height of the group. This number tells tileboard how many tiles tall should the group be.
  • items = The items that the group should contain. Basically which tiles should the group contain. More information will is on the next page.

  • groupMarginCss = the gap between each group measured in pixels. Keep in mind that if it is defined it will override the margin/gap that is already defined in the configuration of Tileboard for this particular group. (Optional) Defaults to the theme
  • hidden = If the group should be hidden. This is a function and can be called at any time. (Optional)

Example with all configuration variables

groups: [
  {
    title: 'Group title',
    width: 2,
    height: 3,
    groupMarginCss: '20px 40px',
    hidden: Boolean | Function,
    items: [],
  }
]

Now let's go do the fun part, Adding Tiles!