2

我正在对聚合物 1.0 元素进行简单测试。在 paper-header-panel 测试中，内容区域元素不可见或在 paper-header div 上方移动。演示在这里，代码在下面。为什么不显示内容文本？

<!DOCTYPE html>
<html>

  <head>
    <title>paper-header-panel demo</title>

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="bower_components/paper-header-panel/paper-header-panel.html">
    <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
  </head>

  <body class="fullbleed layout vertical" style="height: 100%">
      <paper-header-panel mode="waterfall" class="flex">
        <div class="paper-header" style="height: 60px;">I am the header</div>
        <div class="content fit">I am the content</div>
      </paper-header-panel>
  </body>

</html>
4

3 回答 3

3

这可能是你的问题。

<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">

尝试将其更改为

<link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">

前一个仅包含布局混合（实际上是推荐的），而后者包含/deep/您似乎正在使用的布局类（以及选择器）。

于 2015-06-09T13:19:41.303 回答
2

在正文中添加<link rel="import" href="bower_components/paper-styles/paper-styles.html">和删除样式属性：

<body class="fullbleed layout vertical">
  <paper-header-panel mode="waterfall" class="flex">
    <div class="paper-header" style="height: 60px;">I am the header</div>
    <div class="content fit">I am the content</div>
  </paper-header-panel>
</body>

通常，paper-toolbar 组件用于为您导入纸张样式的 paper-header-panel 内。

于 2015-06-09T17:48:33.573 回答
0

也许添加class="fit"到<paper-header-panel>?

于 2015-06-10T23:30:28.450 回答