Polymer paper-header-panel won't render properly

问题

I posted kinda similar problem here in StackOverFlow regarding paper-header-panel of Polymer it was answered but the solution isn't efficient or right way of doing it, you can look it here. Specific import should be made not the generic one as mentioned here.

My code for rendering it properly is the following:

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

But the problem is that this import is already been deprecated.

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

The documentations recommended to use the new class which is.

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

But it doesn't render properly the paper-header-panel.

What did I miss? Or what is my mistake? Any help would be deeply appreciated. Thanks!

回答1:

From the source: 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

You'd only have to include the iron-flex and iron-positioning style modules for your use case.

Ex.

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

来源：https://stackoverflow.com/questions/36192220/polymer-paper-header-panel-wont-render-properly

标签

polymer

material-design

polymer-1.0