2015-12-26 6 views
6

ich ein Polymer 1.x Element namens Input-Header und es sieht aus wie diesesPolymer-Symbol und Papier Symbole zeigt, die nicht bis

<link rel="import" href="../../bower_components/polymer/polymer.html"> 

<dom-module id="input-header"> 

    <template> 

    <style> 
     .dropdown-content { 
     padding: 0px; 
     } 
    </style> 

    <paper-toolbar> 

     <paper-icon-button icon="mail"></paper-icon-button> 
     <iron-icon icon="image:transform"></iron-icon> 
     <div class="title">Left</div> 

     <paper-menu-button horizontal-align="right" vertical-align="top"> 
     <paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button> 
     <div class="title">Right</div> 
     </paper-menu-button> 
    </paper-toolbar> 

    </template> 

    <script> 
    Polymer({ 

     is: 'input-header', 

     properties: { 

     label: { 
      type: String, 
      notify: true 
     } 

     } 

    }); 
    </script> 

</dom-module> 

ich es in meinem index.html enthalten sind, wie folgt:

<body unresolved id="app"> 

    <input-header label="Left"></input-header> 

</body> 

Aber aus irgendeinem Grund, das Papier-Symbol oder Eisen-Symbole nicht angezeigt, wie hier

enter image description here gesehen

+0

Sie importieren müssen 'Papier-icon' und' Eisen-icon' –

Antwort

7

Update:Sehen Sie diese Arbeit demo

Sie haben paper-icon-button, iron-icon und image-icons.html, importieren, entweder global oder in diesem speziellen Element. Gefällt Ihnen dieses

<!-- import the iron-icon & paper-icon-button custom element --> 
<link rel="import" 
    href="path/to/iron-icons/iron-icons.html"> 

    <!----- this is required for iron-icon image:transform to work -----> 
<link rel="import" 
    href="path/to/iron-icons/image-icons.html"> 
<!----------------------------------------------> 

<link rel="import" 
    href="path/to/paper-icon-button/paper-icon-button.html"> 
<link rel="import" 
    href="path/to/paper-toolbar/paper-toolbar.html"> 
<link rel="import" 
    href="path/to/paper-menu-button/paper-menu-button.html"> 

Ich gehe davon aus, dass Sie installiert haben/heruntergeladen die iron-icon und andere Elemente. Wenn Sie mit diesem Bower tun

bower install --save PolymerElements/iron-icon 
    bower install --save PolymerElements/paper-icon-button 

find Bower Befehl für andere Elemente aus Polymer Element Catalog

+0

sorry, aber Demo nicht funktioniert? – LoveAndHappiness

+0

Es funktionierte bis gestern, jetzt die Polymer-Elemente Quelle 'http: // Element-Party.xyz/'wird von der Richtlinie für die übergreifende Ressourcenfreigabe blockiert. –

+0

[hier] (http://jsbin.com/haharaweno/edit?html,output) ist eine aktualisierte Demo –

6

Der Eisen-Icons Bug ist ein Artefakt des Polymer-Starter-Kit installieren, die eine Datei my-icons.html genannt enthalten . Diese Datei ist identisch mit einer der Iron-Icons-Dateien auf niedriger Ebene benannt. natürlich überschreibt es die, die wir wirklich wollen.

Durch Umbenennung von my-icons.html in anythingElse -icons.html oder my-icons.html.buggy werden die Iron-Icons sofort verfügbar. Woohoo.

+0

Vielen Dank! Das war genau das Problem. –

0

Es scheint auch, da Polymer 2.0.1,

Papier-icon-Taste nicht nicht ein Standard Icon-Set enthalten.

So PolymerElements/Eisen-icons/Eisen-icons.html sollte separat enthalten sein. Hier

ist die vollständige Erklärung:

Papier-icon-Taste enthält keine Standard-Symbol gesetzt. Um die Symbole aus dem Standardsatz zu verwenden, fügen Sie PolymerElements/iron-icons/iron-icons.html hinzu und geben Sie über das Symbolattribut an, welches Symbol aus dem zu verwendenden Symbolsatz ausgewählt wird.

Weitere Informationen finden Sie unter: https://www.webcomponents.org/element/PolymerElements/paper-icon-button

Verwandte Themen