Polymer 聚合物中的动态纸张背景
我用的是Polymer 1.0初学者工具包。我试图在更改路线时更改工具栏的背景和颜色Polymer 聚合物中的动态纸张背景,polymer,Polymer,我用的是Polymer 1.0初学者工具包。我试图在更改路线时更改工具栏的背景和颜色 <paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header header-height="256" condensed-header-height="100"> <paper-toolbar> <paper-icon-button id="pap
<paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header
header-height="256" condensed-header-height="100">
<paper-toolbar>
<paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
<span class="space"></span>
<!-- Toolbar icons -->
<nt-toolbar-icons></nt-toolbar-icons>
<!-- Application name -->
<div class="middle middle-container">
<div class="app-name">[[route.title]]</div>
</div>
<!-- Application sub title -->
<div class="bottom bottom-container">
<div class="bottom-title">[[route.subline]]</div>
</div>
</paper-toolbar>
<div style="height: 1400px;">
<iron-pages attr-for-selected="data-route" selected="{{route.name}}">
<section data-route="home">
{{route.title}} /
</section>
<section data-route="users">
users {{route.params.type}}
</section>
</iron-pages>
</div>
</paper-scroll-header-panel>
</paper-drawer-panel>
在my shared-styles.html中,工具栏的定义如下:
paper-scroll-header-panel#headerPanelMain {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: var(--paper-grey-200, #eee);
/* background for toolbar when it is at its full size */
--paper-scroll-header-panel-full-header: {
background-image: url(../images/headers/bg4.jpg);
}
/* background for toolbar when it is condensed */
--paper-scroll-header-panel-condensed-header: {
background-color: var(--paper-light-blue-600);
}
}
但是现在我想在路线改变时改变这个颜色/背景方案。
我已尝试将数据路由$=“[[route.name]]”添加到纸张滚动标题面板。
然后我用[data route=“home”]选择器更改了shared-styles.html:
paper-scroll-header-panel#headerPanelMain[data-route="home"] {
--paper-scroll-header-panel-full-header: {
background-image: url(../images/headers/bg3.jpg); //BG CHANGES HERE
}
}
但这不起作用。
还有其他想法吗?自定义样式仅在创建时应用。如果您像这里一样进行动态更改,则需要在自定义元素上调用
updateStyles
,或者调用Polymer.updateStyles
进行全局更新。在您的情况下,当路线改变时,您会这样做。您可以在中找到更多信息。您可以执行以下操作
<paper-toolbar id="mainToolbar" class="tall" style$={{computedStyleHandler(color)}}>
computedStyleHandler: function(color){
return 'background-color:' + color + ';'
}
computedStyleHandler:函数(颜色){
返回“背景色:'+color+';”
}
<paper-toolbar id="mainToolbar" class="tall" style$={{computedStyleHandler(color)}}>
computedStyleHandler: function(color){
return 'background-color:' + color + ';'
}