Question

我是Polymer的新手。

问题： 我想在我的自定义元素中使用paper-scroll-header-panel。尝试，但不会出现背景图像。更新：Problem with images on Imgur

<小时/> 文件： 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>

沙龙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。以同样的方式所有这些进口。
添加了attiribute到样式标签 salon-header.html喜欢:(同样演示文件。）
更改了dom-module和模板标签。示例：我放了模板内部或外部的样式。同样的方式进口里面模板和外面。

<小时/> 最后：在这个项目结构中（问题），标题没有背景图片，只有背景颜色＃3f51b5。
当我尝试其他方式时，有时标题不会出现，有时标题具有透明背景（继承自正文：#ee）

我希望，我可以自己解释一下。

顺便说一句，您可以与我分享您的聚合物经验，您可以向我推荐聚合物提示。感谢。

Answer 1

将<style>标记放在<template>元素之外。请参阅相关文档here。与添加外部样式表相同。您应该在<template>标记之前和<dom-module>

中添加它

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

1 个答案: