2017-03-12 7 views
1

나는 나는 나는 폴리머 2 응용 프로그램을 만드는 고분자 CLI를 사용폴리머 2 응용 프로그램 : 종이 버튼 텍스트가 없습니다

고분자, 재료 및 웹 구성 요소에 아주 아주 새로운

polymer init 

그리고 나는 폴리머 2 스타터 키트

내 뷰 1 파일에 일부 paper buttons을 추가하려고를 선택했다,하지만 난 종이 버튼 정자 종속성에 추가되지 않았 음을 발견 그래서 나는 그것을 직접 추가했다.

{ 
 
    "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 
 
}

와 나는이 같은 내보기 중 하나에 마크 업을 추가 : 내 bower.json은 다음과 같습니다

<!-- 
 
@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

난 당신이 paper-button1.0.14 태그를 사용하는 것을 볼 수 있습니다. 폴리머 V2.x는 웹 컴포넌트의 v1 스펙에 있고 v0에는 paper-button v1.x이므로 폴리머의 과 호환되지 않아야합니다.

텍스트가 표시되지 않는 구체적인 이유는 content 태그의 비추천이어야하며, v1 사양의 slot 태그를 사용하는 것이 좋습니다.

분기/태그 paper-button을 시도해야합니다.