聚合物纸张标题面板无法正确渲染答案

【问题标题】：Polymer paper-header-panel won't render properly聚合物纸张标题面板无法正确渲染
【发布时间】：2016-03-24 02:25:43
【问题描述】：

我在 StackOverFlow 中发布了关于 Polymer 的纸张标题面板的类似问题，但该解决方案效率不高或方法不正确，您可以查看 here。具体的导入应该不是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">

文档建议使用新的类。

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

但它不能正确地呈现纸张标题面板。

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

【问题讨论】：

标签： polymer material-design polymer-1.0

【解决方案1】：

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

一组布局类，可让您直接在标记中指定布局属性。

您必须将此文件包含在需要使用它们的每个元素中。样品使用：
<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>
以下导入可用：

铁弯曲

铁弯曲反向

铁弯曲对齐

铁弹性系数

铁定位

您只需为您的用例包含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>

【讨论】：

知道了！谢谢你。以后我会注意的。