Как создать поверхности в поверхности контейнера с помощью Famo.us

Question

Я хочу иметь внутри как

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

А как насчет поверхностей внутренних поверхностей? Я не могу сделать:

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

Я хочу, чтобы выкладываться так: http://i.imgur.com/dAJFtmN.png

[EDIT] Мой вопрос заключается в том, чтобы создать макет в картинке, используя famo.us. В частности, как иметь div внутри div или поверхности внутри поверхности. Я сейчас смотрю пример макета famo.us, спасибо

Answer 1

Вы можете использовать GridLayout для элементов и добавить сетку в ContainerSurface. Конечно, есть другие способы выполнить ваш макет. Вы должны выложить его на основе использования.

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

Используйте 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);