Как могат да се използват различните набори икони с основни икони в 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-elements 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="/bgpackages/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="/bgpackages/core_elements/src/core-icons/iconsets/social-icons.html"> 
    <link rel="import" href="/bgpackages/core_elements/core_icons/iconsets/social_icons.html"> 
    this changed again with core-elements 0.2.0+1 -->
    <link rel="import" href="/bgpackages/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
Как мога да настроя | style=fill:steelblue; | програмно като се има предвид, че извлякох иконата, така че $['bookmark-button']. |$['bookmark-button'].attributes[ 'style' ] = 'fill: green;';| не работи. - person st_clair_clarke; 20.08.2014
comment
Благодаря Гюнтер. Определено не бих го помислил. Изглеждаше толкова просто, когато започнах, но се оказа всичко друго, но не и просто. - person st_clair_clarke; 21.08.2014
comment
Спомням си колко трудно беше да разбера как работи тази сянка. Все още не знам всички подробности. През повечето време подробните познания така или иначе не са необходими ;-) - person Günter Zöchbauer; 21.08.2014