paper-header-panel 内容 div 行为异常

Question

我正在对 Polymer 1.0 元素进行简单测试。在 paper-header-panel 测试中，内容区域元素不可见或在 paper-header div 上移动。演示是here，代码如下。为什么没有显示内容文本？

<!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>

Answer 1

这可能是您的问题。

<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/ 选择器） .

Answer 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 中，它会为您导入纸张样式。

Answer 3

是否可以将 class="fit" 添加到 <paper-header-panel>？

paper-header-panel 内容 div 行为异常

paper-header-panel content div behaving erratically

css

polymer

polymer-1.0