Ako používať ikony polymérov jadra v aplikácii angular.js ..? - uhly, polymér

Používam uhlové.js vybudovať SPA a hranatý materiál pre navrhovanie dispozície. Ale ukázalo sa, že hranaté materiálové ikony nie sú CSS štýlové, ale polymérové ​​ikony sú. Takže chcem používať polymérové ​​ikony v mojej aplikácii angular.js .. polymer.js v mojich skriptoch a import core-icons.html ale vyskytla sa chyba.

Uncaught HierarchyRequestError: Failed to execute "appendChild" on "Node": Nodes of type "HTML" may not be inserted inside nodes of type "#document".

Uncaught TypeError: Cannot read property "resolveDom" of undefined

Ako môžem použiť polymér ikony vnútri mojej aplikácie angular.js ..?

odpovede:

0 pre odpoveď č. 1

Úhlové nerozumie ShadowDOM, že Polymer široko používa. Takže keď Angular analyzuje a kompiluje HTML to nevie, čo robiť, ktoré vlastné prvky, takže to hodí chybu.

Ale z Polymeru 0,8 by sa to mohlo zmeniť a mohlo by byť kompatibilné s Angular.

Ešte jedna vec, ktorú som si všimol vo svojej otázke, bolo, že ste pridali polymer.js namiesto webcomponents.js. polymer.js je knižnica polymérov, ktorá sa používa pri vytváraní nových prvkov a interakcii s nimi, kde sú webcomponents.js je polyfill pre webové komponenty samotné.

---

0 pre odpoveď č. 2

Ja som použil polymérové ​​ikony v uhlovom projekte s použitím materiálu hranatého. V mojom prípade som chcel použiť aj prvok z polymérového papiera a ikony, ale ja som to urobil aj s jadrom.

Nemusel som zahrňovať polymér.js, len:

polymer.html, core-icon.html, core-icons.html

Použil som papier-ikonu-tlačidlo, takže som tiež zahrnuté

paper-icon-button.html a ja som použil som ikonu zo spoločenského setu, takže som zahrnoval aj core-icons / social-icons.html

pre len jadro-ikonu (mal som to v tlačidle, ale nemám "t myslím, že je to potrebné)

<button ng-click="toggleLeft()" class="rp-menu-button">
<core-icon icon="menu></core-icon>
</button>

CSS (LESS):

.rp-menu-button {
background: none;
border: none;
.rp-menu-icon;
}

.rp-menu-icon {
width: 48px;
height: 48px;
color: @toolbar-font-color;
}

Alebo pre tlačidlo s ikonou papiera:

<paper-icon-button class="rp-card-paper-icon" id="share" icon="social:share">

CSS (LESS):

.rp-card-paper-icon {
text-align: center;
color: @inactive-icon;
&:hover {
color: @active-icon;
}
}
.rp-card-paper-icon::shadow core-icon {
width: 18px;
height: 18px;
}

.rp-card-paper-icon::shadow #ripple {
width: 33px;
height: 33px;
}

.rp-card-paper-icon#share::shadow #ripple {
color: green;
}

Takže nastavíte farbu v triede a veľkosť ikony v. [Class] :: shadow core-icon a môžete použiť

.rp-card-paper-icon::shadow #ripple

štýl na zvlnenie efektu (ak používate tlačidlo s ikonou papiera)

---