Question

对于聚合物1.1，我遇到了paper-header-panel

的2个问题

我无法获得面板下方显示的内容
我无法将height: 2000px;应用于div所以我可以有一个滚动条来获得瀑布效果。

我使用https://github.com/PolymerElements/paper-header-panel/blob/master/demo/index.html作为示例。

在做了一些麻烦后，div id="mainContainer"的身高是0。如果从类中删除flex，则应用它的高度。但是这会破坏滚动的瀑布效果。

<dom-module id="custom-paper-header-panel">

  <template>
  <style>
    #foobar {
      height: 2000px;
    }
  </style>

    <paper-header-panel mode="waterfall-tall">
      <paper-toolbar>
        <div class='title'></div>
        <paper-tabs>
          <paper-tab>
            <div>contact</div>
          </paper-tab>
        </paper-tabs>
        <div class='title bottom'>
          <h1 id="name-title">foo</h1>
        </div>
      </paper-toolbar>
      <div id="foobar">
          <h2>This isn't being shown</h2>
      </div>
    </paper-header-panel>
  </template>

  <script>
    Polymer({
      is: "custom-paper-header-panel"
    });
  </script>
</dom-module>

Answer 1

你的元素看起来很好。问题可能是由于您的网页上定义的custom-paper-header-panel元素没有应用Height而引起的。

尝试制作fit。

<custom-paper-header-panel class="fit"></custom-paper-header-panel>

有关正常工作的样本，请参阅此plunker。

Answer 2

答案：

我认为文档并没有完全明确，因为它提供了大多数示例而没有以下属性...但是如果你想要一个完整的标题（可能是99％的你应该使用的时间：

<body class="fullbleed layout vertical">
    <paper-header-panel  class="flex">

Answer 3

我认为这是Polymer的一个错误。如果页面顶部有<!DOCTYPE html>，则Paper-header-panel不起作用。

尝试删除doctype声明。它解决了我的问题。

聚合物1.1纸 - 标题 - 模板中的面板破损

3 个答案: