Aru*_*Das 7 javascript css html5 polymer polymer-1.0
我有一个名为input-header的聚合物1.x元素,它看起来像这样
<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>
Run Code Online (Sandbox Code Playgroud)
我已将它包含在我的index.html中,如下所示:
<body unresolved id="app">
<input-header label="Left"></input-header>
</body>
Run Code Online (Sandbox Code Playgroud)
但出于某种原因,纸质图标或铁图标并未显示在此处
更新: 查看此工作演示
你必须导入paper-icon-button,iron-icon和image-icons.html,全球或在这个特殊的元素.像这样
<!-- 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">
Run Code Online (Sandbox Code Playgroud)
我假设您已经安装/下载了iron-icon其他元素.如果你正在使用凉亭这样做
bower install --save PolymerElements/iron-icon
bower install --save PolymerElements/paper-icon-button
Run Code Online (Sandbox Code Playgroud)
从Polymer Element Catalog中查找其他元素的bower install命令
小智 6
iron-icons bug是Polymer入门套件的工件,包含一个名为my-icons.html的文件.此文件同名为低级铁图标文件之一.自然它会覆盖我们真正想要的那个.
将my-icons.html重命名为anythingElse -icons.html或my-icons.html.buggy将立即使用铁图标.哇噢.
| 归档时间: |
|
| 查看次数: |
5582 次 |
| 最近记录: |