Gün*_*uer 2 dart dart-polymer paper-elements core-elements
core-icons包含不同的图标集
如何使用它们并不明显.
以下是纸张元素中包含的图标的概述http://polymer.github.io/core-icons/components/core-icons/demo.html
我创建了一个演示如何使用它们的示例.
<!DOCTYPE html>
<html>
<head>
<title>core-icons</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="packages/paper_elements/paper_icon_button.html">
<!-- choose the name according to the set you want to load - "social-icons" -->
<!-- this is now accessible with a simpler path
<link rel="import" href="packages/core_elements/src/core-icons/iconsets/social-icons.html">
<link rel="import" href="packages/core_elements/core_icons/iconsets/social_icons.html">
this changed again with core-elements 0.2.0+1 -->
<link rel="import" href="packages/core_elements/social_icons.html">
</head>
<body>
<!-- use the icon by setting the `icon` attribute. The value consists of iconsset-id a colon followed by the icon name. -->
<paper-icon-button id="bookmark-button" icon="social:plus-one" style="fill:steelblue;"></paper-icon-button>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
您可以使用Dart代码设置图标样式
($['bookmark-button'] as dom.Element).querySelector('* /deep/ #icon').style
..setProperty('fill', 'red')
..setProperty('stroke', 'blue')
..setProperty('stroke-with', '3px');
事实证明这有点棘手,因为它paper-icon-button有多个shadowRoot(实际上是3个),当我在<g>元素上设置样式(在里面<core-icon>)它被应用但后来很快恢复原因不明.
我刚看到这在Firefox中不起作用.据我所知,/deep/in 的polyfill querySelector()正在进行中.一旦当前的Polymer版本集成在Polymer.Dart中,它可能会更好地工作.
这适用于Dartium和Firefox:
($['bookmark-button'] as dom.Element).shadowRoot.olderShadowRoot.querySelector('#icon').style
..setProperty('fill', 'red')
..setProperty('stroke', 'blue')
..setProperty('stroke-with', '3px');
当实现<paper-icon-button>更改时,此解决方案可能会中断,但希望在一段时间内第一次尝试很快就能在所有浏览器中运行.
对于填充工具支持/deep/在querySelector包括在Polymer.js 0.4.0.希望下一个Polymer.dart更新也包括它.
| 归档时间： |
|
| 查看次数： |
1071 次 |
| 最近记录： |