FlexCells

FlexCells creates a flex container with resize-able children. FlexCells extends Uxi , Template and Placeholder.

OML

 {"default:FlexCells":{
      "axis" : "x",
      "min" : 10,
      "template" : null,
      "auto_hide" : true,
      "children" : ["50%", "25%", "25%"]
 }}

axis

The axis, either horizontal represented by x or vertical y

min

The minimal size in percent that a cell can be resized down to, can be expressed as a single value, or array of values

min: '20%',
min: 200,
min: [100, '20%']

children

The original sizes for each children

template/html

This component extends the Template class, so you can also render HTML or a template, and use the elements of the template instead of having the component creating some. The component in this case expects all first children element to be flex-items.

auto hide

Set auto_hide to true to hide a resizer if a nearby cell is set to 0

Mehods

renderAt

Render cell given position, starting from the left for x axis and top for y axis. It's not needed to call clearAt.

 myFlexCells.renderAt(1, some_oml);

clearAt

Clearcell given position, starting from the left for x axis and top for y axis.

 myFlexCells.clearAt(2);

cellSize

Get the current cell sizes

 myFlexCells.cellSize(); 
 //['50%', '50%'] 

Set a cell size (cell index, size)

 myFlexCells.cellSize(0, '30%');

Set all cell sizes

 myFlexCells.cellSize(['10%', '90%']);

flatten 1.4.0+

Collapses the cells in a column without resize

 myFlexCells.flatten(true|false);

Events

 OGX.FlexCells.RESIZE

Example

A full example with HTML Templates as sub nodes

 {"default:FlexCells":{
      "axis" : "x",
      "children" : ["50%", "25%", "25%"],
      "node:OML":[
           {"default:Templates.TemplateA"},
           {"default:Templates.TemplateB"},
           {"default:Templates.TemplateC"}
      ]
 }}

Using a template instead

 {"default:FlexCells":{
      "axis" : "x",
      "children" : ["50%", "25%", "25%"],
      "template" : "my_template',
      "node:OML":[]
 }}

Another example where other instances of FlexCells are embedded into the first instance of FlexCells

 "mystage/cells": {
       "default:FlexCells": {
           "children" : ["20%", "60%", "20%"],
           "axis" : "x",
           "node:OML":[
               {
                   "default:FlexCells":{
                       "children" : ["20%", "50%", "30%"],
                       "axis" : "y"
                   }
               }, 
               {}, 
               {
                   "default:FlexCells":{
                       "children" : ["20%", "20%", "20%", "20%", "20%"],
                       "axis" : "y"
                   }
               }
           ]
       }
   }