Polymer 纸张滚动页眉面板不使用自定义元素_Polymer

Polymer 纸张滚动页眉面板不使用自定义元素

polymer

Polymer 纸张滚动页眉面板不使用自定义元素,polymer,Polymer,我是聚合体的新手问题: 我想在我的自定义元素中使用纸张滚动标题面板。正在尝试，但背景图像未显示。更新：文件：index.html，salon-header.html index.html <html> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bower_components/webcomponentsjs/we

我是聚合体的新手

问题: 我想在我的自定义元素中使用纸张滚动标题面板。正在尝试，但背景图像未显示。更新：文件：index.html，salon-header.html

index.html

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="salon-header.html">
<head>
<body>
    <salon-header></salon-header>
<body>
<html>

salon-header.html：

<dom-module id="salon-header">
    <link rel="import" href="bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
    <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
    <link rel="import" href="bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="bower_components/iron-media-query/iron-media-query.html">
    <link rel="import" href="bower_components/paper-scroll-header-panel/demo/sample-content.html">
    <template>
    <style>
        paper-scroll-header-panel {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: var(--paper-grey-200, #eee);
            --paper-scroll-header-panel-full-header: {
                background-image: url(bg3.jpg);
            }
            ;
            --paper-scroll-header-panel-condensed-header: {
                background-color: var(--google-yellow-500, #f4b400);
            }
            ;
        }
        paper-toolbar {
            background-color: transparent;
        }

        paper-toolbar .title {
            font-size: 40px;
            margin-left: 60px;
        }
        .content {
            padding: 8px;
        }
    </style>
    <paper-scroll-header-panel condenses>
        <paper-toolbar class="tall">
            <paper-icon-button icon="arrow-back"></paper-icon-button>
                <div class="flex"></div>
                <paper-icon-button icon="search"></paper-icon-button>
                <paper-icon-button icon="more-vert"></paper-icon-button>
                <div class="bottom indent title">Title</div>
            </paper-toolbar>
            <div class="content">
                <h3>Resize window to toggle between fixed header and scrolled header</h3>
                <sample-content size="100"></sample-content>
            </div>
        </paper-scroll-header-panel>
    </template>
</dom-module>

<script>
    Polymer({
        is: 'salon-header'
    });
</script>

这在单个文件中工作。但我想要分开的文件来清理索引

我试过：

将webcomponentsjs仅放在索引和沙龙标题中。同样地所有这些进口产品。在中为样式标记添加了属性 salon-header.html类似：演示文件夹。更改的dom模块和模板标记包括。示例：我把模板内部或外部的样式。同样的方法在内部导入模板和外部。最后：在这个有问题的项目结构中，标题没有背景图像，只有背景色3f51b5。当我尝试其他方法时，有时标题不出现，有时标题具有从body:eee继承的透明背景

我希望，我能解释我自己

顺便说一句，你可以和我分享你的聚合物经验，你可以向我推荐聚合物技巧。谢谢。

将标签放在元素外部。请参阅相关文档。与添加外部样式表相同。您应该将其添加到标签前和标签内

衷心感谢您。我已经在使用文档，但这非常有用。我尝试了很多组合，包括外部和内部等，但每次我都使用了“Sublime Text-Html Css Js Prettify”扩展。它打破了我的风格准则。我现在明白了。再次感谢。再次更改为inside@Aravind是否可以将聚合物值与标签中背景图像的值绑定，以便我们可以拥有可变的背景图像