Question

我刚开始使用Polymer，我使用paper-icon-button来测试它。我认为我设置正确，因为我使用的按钮有涟漪效应;当我设置src属性时，我想要的图片出现了。

<!-- This works -->
<paper-icon-button src="http://placekitten.org/g/50/50"></paper-icon-button>

但是，我没有使用默认图标，例如：

<!-- This does not work. There is a blank icon. 
                      However, ripple effect still works on click -->
<paper-icon-button icon="menu"></paper-icon-button>

我在Linux服务器上运行聚合物项目。该演示也无法在我的计算机上运行。以下是演示的样子：https://elements.polymer-project.org/elements/paper-icon-button?view=demo:demo/index.html 以下是在polyserve上运行的演示： enter image description here

我使用bower命令而不是zip文件设置paper-icon-button所以我假设所有的依赖都在那里。不确定缺少什么：请帮我谢谢！

Answer 1

您还需要导入铁图标。看看这个demo 这个example repository。

在Windows上初始化项目的正确方法：

Install yarn
打开git bash
mkdir -p /c/projects/polymer && cd /c/projects/polymer
yarn add --dev bower
./node_modules/.bin/bower init
如果您看到：＆＃34; bower ENOINT Register需要一个交互式shell＆＃34;在cmd.exe中运行以上命令。 More。
./node_modules/.bin/bower install --save PolymerElements/iron-icons
./node_modules/.bin/bower install --save PolymerElements/paper-icon-button
在此帖子末尾创建包含内容的index.html
yarn add --dev http-server
./node_modules/http-server
在网络浏览器中打开http://127.0.0.1:8080

的index.html：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
    <script src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="/bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
  </head>
  <body>
    <paper-icon-button icon="favorite" title="heart"></paper-icon-button>
  </body>
</html>

PolymerElements，paper-icon-button具体，没有按预期显示

1 个答案: