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;
}

我添加了中心属性，但我也希望将内容放在表面中间。我是否必须使用CSS或者还有其他方法吗？我尝试在此Surface中添加另一个View / Surface并添加了align / origin修饰符。不起作用：我仍然需要调整特定（浏览器）布局的原点/对齐值...

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包含在动态视图中，但您确定您的网格不低于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/以获取完整示例

famo.us：修改GridLayout中的内容

1 个答案: