聚合物纸页眉面板无法正确呈现 [英] Polymer paper-header-panel won't render properly

查看：77 发布时间：2020/5/6 9:55:10 polymer material-design polymer-1.0

本文介绍了聚合物纸页眉面板无法正确呈现的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在StackOverFlow上发布了一个类似的问题，它回答了Polymer的纸页眉面板，但该解决方案效率不高或执行方法不正确，您可以查看它此处所述的通用导入.

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

文档建议使用新类.

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

推荐答案

来自源:

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

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>

以下导入可用:

iron-flex
反铁弹力
轻柔对准
屈曲因子
铁定位

iron-flex
iron-flex-reverse
iron-flex-alignment
iron-flex-factors
iron-positioning

对于您的用例，您只需包含iron-flex和iron-positioning样式模块.

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

例如.

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

这篇关于聚合物纸页眉面板无法正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

聚合物纸页眉面板无法正确呈现 [英] Polymer paper-header-panel won't render properly

问题描述

推荐答案

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

聚合物纸页眉面板无法正确呈现 [英] Polymer paper-header-panel won&#39;t render properly

问题描述

推荐答案

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

聚合物纸页眉面板无法正确呈现 [英] Polymer paper-header-panel won't render properly

登录关闭