昨天我决定尝试使用Polymer 1.0,在尝试设置纸质工具栏时,我已经遇到了困难。
文档说明可以使用以下方法更改背景颜色: --paper-工具栏背景
但我怎样才能在CSS上使用它?
我尝试了以下内容:
paper-toolbar {
--paper-toolbar-background: #e5e5e5;
}
还有:
paper-toolbar {
--paper-toolbar {
background: #e5e5e5;
}
}
但都没有奏效。这样做的正确方法是什么?
感谢。
答案 0 :(得分:16)
如果要在主页面上设置样式,则必须使用<style is='custom-style'>
应用样式。这是为了使自定义CSS属性工作。
申请相对容易。 paper-toolbar
提供了2个自定义属性和一个mixin。 --paper-toolbar-background
是一个属性,可在--paper-toolbar-color
更改其前景色时更改工具栏的背景颜色。 --paper-toolbar
是应用于工具栏的mixin。
使用这些属性与在元素中应用样式相同。作为一个例子
<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: #00f; /* changes the background to blue*/
--paper-toolbar-color: #0f0; /* changes the foreground color to green */
--paper-toolbar: {
font-size: 40px; /* Change default font size */
}; /* Notice the semicolon here */
}
</style>
答案 1 :(得分:5)
直到最近我才找到解决这个问题的方法。我有两个工具栏,我不想仅为标题工具栏更改所有工具栏的CSS。
要更改每个工具栏的CSS,请在外部css文件中添加以下内容:
ThisWorkbook.DoSomething
然而,这并没有解决问题。要根据以下类更改单个纸张工具栏:
paper-toolbar.paper-toolbar-0 {
background: orange;
color: red;
}
上面使用了名为“header”的类,所以在我的CSS中我添加了:
<paper-toolbar class="header">
...
</paper-toolbar>
......它有效!好极了!这意味着你应该能够覆盖执行相同操作的任何其他元素的任何CSS。这是完全未经测试的,但我认为它应该像:
paper-toolbar.header {
background: orange;
color: red;
}
希望这一切都有帮助!