css - famo.us:修改 GridLayout 中的内容

Question

是否可以在不使用 CSS 的情况下修改表面的内容(在 GridLayout 中使用)？例如让文本居中？

基本示例:

    function createGrid( section, dimensions, menuData ) {
      var grid = new GridLayout({
        dimensions: dimensions
      });

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

      for(var i = 0; i < dimensions[1]; i++) {
          surfaces.push(new Surface({
              content: menuData[i].title,
              size: [undefined, undefined],
              properties: {
                backgroundColor: "#ff0000",
                color: "white",
                textAlign: 'center',
              }
          }));
      }

      return grid;
}

我添加了 center 属性，但我还希望内容位于我的表面中间。我必须使用 CSS 还是有其他方法？ 我尝试在此表面内添加另一个 View /表面并添加对齐/原点修饰符。没用:我仍然需要为特定(浏览器)布局调整原点/对齐值 ...

Answer 1

第一个问题我不太确定，但我可以回答第二个问题。

text-align帮助您水平居中您的内容。所以问题是如何垂直进行。

最简洁的方法是将 line-height 设置为与包含 div 的高度相同。对于您的情况，有两种方法可以做到:

1) 计算网格的高度。例如，如果整个屏幕有一个 9*9 的 GridLayout，那么我们将有 gridHeight = window.innerHeight/9。然后你只需要添加 lineHeight: gridHeight 到你的属性对象。

检查 http://jsfiddle.net/mrwiredancer/veLpbmmo/2/完整的例子

2) 如果你无法事先计算出网格的高度，你可以在网格中间放置一个固定高度(小于网格高度)的表面。例如，您的 GridLayout 包含在动态 View 中，但您确定您的网格不低于 20px 高。然后你可以这样做:

var container, surface, __height = 20;

for(var i = 0; i < dimensions[1]; i++) {
    container = new Container({ //View works as well
        properties: {
            backgroundColor: '#FF0000'
        }
    })

    surface = new Surface({
        content: menuData[i].title,
        size: [undefined, __height],
        properties: {
            lineHeight: __height+'px', //same as surface's height
            color: "white",
            textAlign: 'center',
        }        
    });

    container.add(new Modifier({origin: [.5, .5]})).add(surface);

    surfaces.push(container);
}

检查 http://jsfiddle.net/mrwiredancer/uxq30yp9/1/完整的例子