聚合物纸页眉面板无法正确呈现

Question

我在 Whosebug 中发布了一个关于 Polymer 的 paper-header-panel 的类似问题，它已得到解答，但解决方案效率不高或方法不正确，您可以查看 . Specific import should be made not the generic one as mentioned here。

我正确渲染它的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import"
          href="bower_components/paper-header-panel/paper-header-panel.html">
    <link rel="import"
          href="bower_components/paper-toolbar/paper-toolbar.html">
    <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">

</head>

<body class="fullbleed layout vertical">
    <!-- paper-header-panel must have an explicit height -->
    <paper-header-panel class="flex">
        <paper-toolbar>
            <div>Header</div>
        </paper-toolbar>
        <div>Content</div>
    </paper-header-panel>
</body>

</html>

但问题是此导入已被弃用。

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

建议使用新的 class 的文档。

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

但它无法正确呈现纸张页眉面板。

我错过了什么？或者我的错误是什么？任何帮助将不胜感激。谢谢！

Answer 1

来源：https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html

A set of layout classes that let you specify layout properties directly in markup.

You must include this file in every element that needs to use them. Sample use:
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<div class="layout horizontal layout-start">
  <div>cross axis start alignment</div>
</div>
The following imports are available:

iron-flex

iron-flex-reverse

iron-flex-alignment

iron-flex-factors

iron-positioning

您只需为您的用例包含 iron-flex 和 iron-positioning 样式模块。

例如

<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-positioning"></style>
<body class="fullbleed layout vertical">
    <!-- paper-header-panel must have an explicit height -->
    <paper-header-panel class="flex">
        <paper-toolbar>
            <div>Header</div>
        </paper-toolbar>
        <div>Content</div>
    </paper-header-panel>
</body>

聚合物纸页眉面板无法正确呈现

Polymer paper-header-panel won't render properly

polymer

material-design

polymer-1.0