文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在Dart中使用不同的核心图标图标集？

问如何在Dart中使用不同的核心图标图标集？
EN

Stack Overflow用户

提问于 2014-07-16 18:44:31

回答 1查看 1.1K关注 0票数 2

核心图标包含不同的图标集，如

图标
av图标
通讯图标
设备图标
硬件图标
图像图标
地图-图标
通知图标
png-图标
社交图标

现在还不清楚如何使用它们。

dart

dart-polymer

paper-elements

core-elements

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-07-16 18:47:51

这里概述了纸质元素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/在querySelector()中的填充工作正在进行中。也许它会更好的工作，一旦目前的聚合物释放已经集成在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更新也包括它。

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24788347

复制

相似问题

问如何在Dart中使用不同的核心图标图标集？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Dart中使用不同的核心图标图标集？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Dart中使用不同的核心图标图标集？
EN