Question

我想进去像

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

表面内的表面怎么样？我不能这样做：

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

我希望它像这样布局： http://i.imgur.com/dAJFtmN.png

[编辑]我的问题是如何使用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);

如何使用Famo.us在Container表面中创建Surfaces

2 个答案: