How do I create Surfaces in a Container Surface using Famo.us

Question

I want to have inside like

<div main>
    <div content>
        my content
    </div>
</div>

And what about surfaces inside surfaces? I can't do:

new Surface({
    content: new Surface({})
});

I want it to be laid out like this: https://i.stack.imgur.com/dcqHn.png

[EDIT]My question is how to create the layout in the picture using famo.us. Specifically, how to have a div inside a div or surface inside a surface. I'm looking at the famo.us layout example now, thanks

Answer 1

You could use the GridLayout for the items and add the grid to a ContainerSurface. Of course, there are other ways to accomplish your layout. You should lay it out based on the use case needed.

Example on jsBin

  var mainContext = Engine.createContext();

  var container = new ContainerSurface({
    size: [400, 400],
    properties: {
      overflow: 'hidden',
      backgroundColor: "hsl(" + (100 * 360 / 40) + ", 100%, 50%)"
    }
  });
  var grid = new GridLayout({
    dimensions: [2, 2],
    gutterSize: [30, 30]
  });

  var surfaces = [];
  grid.sequenceFrom(surfaces);

  var temp;
  for (var i = 0; i < 4; i++) {
    temp = new Surface({
      size: [150, 150],
      content: 'I am surface: ' + (i + 1),
      properties: {
        textAlign: 'center',
        lineHeight: '150px',
        backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)"
      }
    });

    surfaces.push(temp);
  }

  container.add(grid);

  mainContext.add(new Modifier({
    align: [0.5, 0.5],
    origin: [0.5, 0.5]
  })).add(container);

Answer 2

Use a SurfaceContainer

var container = new ContainerSurface({
   classes:[ "some-class"]
});

var surf1 = new Surface({content: "Hello World"});
var surf2 = new Surface({content: "Second Surface"});
container.add(surf1);
container.add(surf2);