Question

我有使用网格布局的聚合物元素，我不是试图将其粘贴到制表符中，或者更确切地说是作为polymer-ui-pages元素的子元素，我将其用作{{1的内容元素

我已经建立了一个示例，我试图让它工作。完整的来源是http://jsbin.com/mohem/40/edit

以下是一些摘录。

测试网格

ui-polymer-tabs

可以用

显示

<polymer-element name="my-grid">
<template>

  <polymer-grid-layout id="gridLayout"  layout="{{layout}}"></polymer-grid-layout>          
  <heading>Heading One</heading>
  <panel flex></panel>
  <main>Main Content</main>

</template>

<script>

  Polymer('my-grid', {
    ready: function() {
     this.layout=[[1, 2, 2], [3, 3, 3]];
    }
  })

</script>
</polymer-element>

并按预期显示

现在我尝试将其放在标签

中

<my-grid></my-grid>

用

显示

<polymer-element name="tabs-with-grid" attributes="selectedTab">
<template>

<polymer-ui-tabs selected="{{selectedTab}}">
  <span>One</span>
  <span>Two</span>
</polymer-ui-tabs>

<polymer-ui-pages selected="{{selectedTab}}">
  <my-grid ></my-grid>
  <div>Page Two</div>
</polymer-ui-pages>

</template>

<script>

  Polymer('tabs-with-grid', {
    ready: function() {
      this.selectedTab = 0;
    }
  });

</script>
</polymer-element>

完全不像我期待的那样显示。我做错了什么？

修改

我取得了一些进展。首先，我没有相对于页面布置标签。所以我把它们放在一个垂直的聚合物布局中

下一个问题是聚合物-ui页面的子项大小为0。所以我在包含网格的div上手动设置大小。

http://jsbin.com/vaxev/1/edit

我真正想要的是聚合物-ui页面占据了它的母体聚合物布局给它的所有空间。

我正在尝试创建一个占用浏览器页面大小而没有任何滚动条等的UI。即随着浏览器窗口大小的改变，布局适应以保持ui完全显示。虽然能够控制最小尺寸也会很棒。这可能吗？