Как можно использовать различные наборы иконок основных значков в Dart?

core-icons содержит различные наборы иконок, такие как

  • иконки
  • av-иконки
  • коммуникационные иконки
  • значки устройств
  • аппаратные иконки
  • изображения-иконки
  • карты-значки
  • значки уведомлений
  • png-иконки
  • социальные иконки

Не очевидно, как их использовать.


dart paper-elements dart-polymer core-elements
person Günter Zöchbauer    schedule 16.07.2014    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Вот обзор иконок, содержащихся в элементах paper 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 будет интегрирована в 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>, но, надеюсь, через какое-то время первая попытка будет работать во всех браузерах.

РЕДАКТИРОВАТЬ

Поддержка Polyfill для /deep/ в querySelector включена в Polymer.js 0.4.0. . Надеемся, что следующее обновление Polymer.dart также включает его.

person Günter Zöchbauer    schedule 16.07.2014
comment
Как я могу установить | стиль = заполнение: стальной синий; | программно, учитывая, что я получил значок, поэтому $['bookmark-button']. |$['кнопка-закладка'].attributes[ 'стиль' ] = 'заливка: зеленый;';| не работает. - person st_clair_clarke; 20.08.2014
comment
Спасибо Гюнтер. Я бы точно не догадался. Когда я начинал, это казалось таким простым, но оказалось, что это совсем не просто. - person st_clair_clarke; 21.08.2014
comment
Я помню, как трудно было понять, как работает эта теневая штуковина. Я до сих пор не знаю всех подробностей. В большинстве случаев подробные знания в любом случае не нужны ;-) - person Günter Zöchbauer; 21.08.2014