聚合物芯脚手架着色和纸质按钮 [英] Polymer core scaffold coloring and paper button
问题描述
我开始使用 polymer 0.5代码来构建响应式网站.我知道还没有完全完成，但是尽管如此，我还是觉得整洁和简单可以快速完成工作.
I'm starting to use the polymer 0.5 code to build a responsive website. I know it's not fully finished, but nevertheless I find it pretty neat and simple to get stuff done quickly.
现在，我正在使用 core-脚手架作为总体布局.我知道如何为侧边栏着色，但是我不确定在哪里可以设置主要内容设置的样式.
Now, I'm using the core-scaffold as general layout. I know how to color the sidebar, but I'm not sure where I can style the main content settings.
<html>
<head>
<style>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
core-toolbar {
background: #E5E5E5;
color: white;
}
paper-item.core-selected {
color: #99182c;
fill: #99182c;
}
</style>
</head>
<body unresolved touch-action="auto">
<core-scaffold>
<core-header-panel navigation flex mode="seamed">
<core-toolbar style="background-color: #99182c; color:#fff;">Main site name</core-toolbar>
<core-menu selected="0">
<paper-item icon="home" label="Home"></paper-item>
<paper-item icon="today" label="Activities"></paper-item>
<paper-item icon="account-box" label="People"></paper-item>
<paper-item icon="theaters" label="Pictures"></paper-item>
<paper-item icon="info" label="Info"></paper-item>
<paper-item icon="lock" label="Login"></paper-item>
</core-menu>
</core-header-panel>
<div tool>Home</div>
</core-scaffold>
</body>
</html>
因此核心工具栏正在对左侧边栏进行样式设置，但是如何为主页设置样式?
So the core-toolbar is styling the left sidebar, but how do I style the main page?
我遇到的另一个问题是我想处理纸质元素.但是，使用此core-scaffold时，您会注意到，当屏幕足够小且该选项卡似乎打开左菜单栏时，它是一个常规"按钮，而不是纸质按钮.由于这是在core-scaffold中，因此我不直接知道如何更改它(如果可能的话).有什么想法吗?
Another issue I'm having is that I'd like to work with the paper-elements. However, when using this core-scaffold, you'll notice that when the screen is small enough and the tab appears to open the left menu bar, it's a 'normal' button and not a paper one. Since this is in the core-scaffold, I don't directly know how to change this (if this is possible). Any ideas?
推荐答案
我遇到了同样的问题，事实证明，您可以使用带有特殊符号的CSS在其他元素(核心支架)中设置元素(工具栏)的样式使用::shadow伪元素访问内部组件(在Shadow DOM内部)的语法.
I ran into the same problem and it turns out that you can style the elements (the toolbar) inside other elements (core-scaffold) using CSS with a special syntax to access the inner component (which is inside the Shadow DOM) using the ::shadow pseudo-element.
最上面的规则更改标题背景的颜色，而第二个更改内容区域的背景.
The top rule changes the color of the title background while the second one changes the background of the content area.
core-scaffold::shadow core-toolbar {
background: #E5E5E5;
color: black;
}
core-scaffold::shadow core-header-panel {
background: #FFF;
color: black;
}
来源: http://www.html5rocks.com/zh_CN/tutorials/webcomponents/shadowdom-201/#toc-style-cat-hat
更新:由于填隙，此功能不适用于Firefox.它使用shim-shadowdom指令添加样式的原因是，只有在
Update: This didn't work properly with Firefox because of shims. What did it was adding styles with the shim-shadowdom directive that gets interpreted only when on a non webcomponent/shadowdom native platform:
<style shim-shadowdom>
core-scaffold core-toolbar {
background: #EEE;
color: black;
}
core-scaffold #main core-header-panel {
background: #FFF;
color: black;
}
</style>
请注意，要更改内容区域的背景，我还必须选择#main，因此移植::shadow规则可能需要一些检查...
Note that to change the background of the content area I also had to select #main so porting ::shadow rules might need a bit of inspecting...
最后，当您需要从webcomponent/polymer元素中正确处理Firefox和其他浏览器时，可以
Finally when you need to properly deal with Firefox and other browsers from within a webcomponent/polymer element you can use the polyfill-rule or polyfill-unscoped-rule.
这篇关于聚合物芯脚手架着色和纸质按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
