2017-03-12 38 views
1

我非常非常新的聚合物,材料和Web组件聚合物2应用:纸按钮没有文字

我,所用聚合物CLI创建聚合物2应用

polymer init 

然后我选择了聚合物-2-初学者工具包

我尝试一些paper buttons添加到我的厂景文件,但我发现纸按钮没有添加到凉亭的依赖关系,所以我自己添加了它。我bower.json看起来是这样的:

{ 
 
    "name": "my-app", 
 
    "authors": [ 
 
    "Ehsun" 
 
    ], 
 
    "license": "", 
 
    "dependencies": { 
 
    "app-layout": "PolymerElements/app-layout#2.0-preview", 
 
    "app-route": "PolymerElements/app-route#2.0-preview", 
 
    "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview", 
 
    "iron-icon": "PolymerElements/iron-icon#2.0-preview", 
 
    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#2.0-preview", 
 
    "iron-localstorage": "PolymerElements/iron-localstorage#2.0-preview", 
 
    "iron-media-query": "PolymerElements/iron-media-query#2.0-preview", 
 
    "iron-pages": "PolymerElements/iron-pages#2.0-preview", 
 
    "iron-selector": "PolymerElements/iron-selector#2.0-preview", 
 
    "paper-icon-button": "PolymerElements/paper-icon-button#2.0-preview", 
 
    "polymer": "Polymer/polymer#^2.0.0-rc.1", 
 
    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1", 
 
    "paper-button": "PolymerElements/paper-button#1.0.14" 
 
     
 
    }, 
 
    "devDependencies": { 
 
    "web-component-tester": "6.0.0-prerelease.5" 
 
    }, 
 
    "private": true 
 
}

,我添加了标记,以我的观点一个是这样的:

<!-- 
 
@license 
 
Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 
 
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 
 
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 
 
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 
 
Code distributed by Google as part of the polymer project is also 
 
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 
 
--> 
 

 
<link rel="import" href="../bower_components/polymer/polymer-element.html"> 
 
s<link rel="import" href="../bower_components/paper-button/paper-button.html"> 
 
<link rel="import" href="../bower_components/paper-styles/paper-styles.html"> 
 
<link rel="import" href="shared-styles.html"> 
 

 

 

 
<dom-module id="my-view1"> 
 
    <template> 
 
     <style include="shared-styles"> 
 
      :host { 
 
       display: block; 
 

 
       padding: 10px; 
 
      } 
 
     </style> 
 

 
     <div class="card pink" > 
 
      <h1>Start Now</h1> 
 
      <a href="/view2"><paper-button raised class="indigo">go</paper-button></a> 
 
     </div> 
 

 

 
     <paper-button class="pink">link</paper-button> 
 
     <paper-button raised class="indigo">raised</paper-button> 
 
     <paper-button toggles raised class="green">toggles</paper-button> 
 
     <paper-button disabled class="disabled">disabled</paper-button> 
 
    </template> 
 

 

 
    <script> 
 
     class MyView1 extends Polymer.Element { 
 
      static get is() { 
 
       return 'my-view1'; 
 
      } 
 
     } 
 

 
     window.customElements.define(MyView1.is, MyView1); 
 
    </script> 
 
</dom-module>

现在的按钮无文字,如下所示:

enter image description here

+1

您应该尝试使用'paper-button'的'2.0-preview'分支。见[this](https://www.polymer-project.org/2.0/docs/about_20#elements)doc。 – a1626

+0

谢谢。它现在有效。这是解决方案。如果你发布这个答案,会很好。 – ehsun7b

回答

2

我可以看到您使用1.0.14标记paper-button。这应该与聚合物的不兼容,因为聚合物V2.x在网络组件的v1规范上,并且在v0上是paper-button v1.x

为什么您的文本没有出现的具体原因应该是弃用content标签,以便支持v1规范中的slot标签。

您应该尝试2.0-preview分行/标记paper-button