2017-05-03 8 views
0

폴리머 및 종이 요소에 초보자가 있습니다. 난 그냥 새로운 빈 폴리머 응용 프로그램을 만들고 종이 요소에서 몇 가지 예제를 실행하려고합니다.일부 종이 요소 예제로 폴리머 앱을 작성하는 방법

this을 사용하여 빈 폴리머 앱을 만들었습니다. 는 그럼 이물 사용하여 종이 요소를 추가 - 내가 붙여 복사 다음 bower install --save PolymerElements/paper-elements

code이 :

<link rel="import" href="../../bower_components/polymer/polymer-element.html"> 
<link rel="import" href="/bower_components/paper-button/paper-button.html" > 
<link rel="import" href="/bower_components/paper-input/paper-input.html" >  
<link rel="import" href="/bower_components/iron-icons/iron-icons.html" > 

<dom-module id="allegro-combo-box"> 
    <template> 
    <style> 
     :host { 
     display: block; 
     } 
     paper-input { 
      max-width: 400px; 
      margin: auto; 
     } 
     iron-icon, div[suffix] { 
      color: hsl(0, 0%, 50%); 
      margin-right: 12px; 
     } 
    </style> 
    <h2>Hello [[prop1]]!</h2> 

     <paper-input always-float-label label="Floating label"></paper-input> 
     <paper-input label="username"> 
      <iron-icon icon="mail" prefix></iron-icon> 
      <div suffix>@email.com</div> 
     </paper-input> 

    </template> 

    <script> 
    /** @polymerElement */ 
    class Mextends Polymer.Element { 
     static get is() { return 'my-element'; } 
     static get properties() { 
     return { 
      prop1: { 
      type: String, 
      value: 'my-element' 
      } 
     }; 
     } 
    } 

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

는 불행하게도이 코드는

을 수상 :

<paper-input always-float-label label="Floating label"></paper-input> 
<paper-input label="username"> 
    <iron-icon icon="mail" prefix></iron-icon> 
    <div suffix>@email.com</div> 
</paper-input> 

그래서 내 모든 element.html은 다음과 같습니다 일하지 마라. <h2>Hello [[prop1]]!</h2> 만 작동하며 용지의 요소는 작동하지 않습니다.

문제를 해결하는 방법은 무엇입니까? "async"를 가져 오기에 추가하려고 시도했지만 도움이되지 않습니다.

도와주세요.

콘솔에 일부 오류가 있습니다 용지 요소가 올바른 경로가없는 대한

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry

Uncaught TypeError: Cannot read property 'nativeMethods' of undefined

답변

0

그것은 당신의 import 문처럼 보인다.

<link rel="import" href="../../bower_components/paper-button/paper-button.html" > 
<link rel="import" href="../../bower_components/paper-input/paper-input.html" >  
<link rel="import" href="../../bower_components/iron-icons/iron-icons.html" > 
+0

경로가 올바른지 –

+0

그러면 Polymer 요소의 경로가 잘못되었을 수 있습니다. 아니면 두 개의 bower_components 디렉토리가 있습니까? –

+0

폴리머 요소에 대한 경로가 좋고 하나의 디렉토리 만 있습니다 –