Polymer paper-header-panel won't render proper

2019-06-10 16:19发布

站内问答 / 移动开发
1633 1 6

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>

Proper Rendering

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.

Problematic Rendering

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

1条回答
【Aperson】
2楼-- · 2019-06-10 17:12

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)