Question

我在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">

但它没有正确呈现纸质标题面板。

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

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

聚合物纸 - 标题面板不能正确渲染

1 个答案: