2017-05-05 11 views
0

ポリマー(2.0)の新機能ですので、サンプルアプリケーションで練習していました。 2つの入力フィールドを持つ基本的な「ログイン」画面を作成したかったのです。ポリマー紙の入力はシャドウドームのみで、ブラウザには表示されません

私は今まで何を得ているかをお見せします。

私のindex.html:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <link rel="import" href="./bower_components/webcomponentsjs/webcomponents-lite.js"> 
     <link rel="import" href="./bower_components/polymer/polymer.html"> 
     <link rel="import" href="./testing/login-page.html"> 
    </head> 
    <body unresolved> 
     <login-page></login-page> 
    </body> 
</html> 

そして、私は紙をインストールしている

<dom-module id="login-page"> 
    <template> 
     <h2>Hello!</h2> 
     <paper-input label="test">test</paper-input> 
    </template> 
    <script> 
     Polymer({ 
      is: 'login-page', 
      properties: { 
       prop1: { 
        type: String, 
        value: 'login-page', 
       }, 
      } 
     }); 
    </script> 
</dom-module> 

'テスト' と呼ばれるフォルダ内にある自分のログイン-page.html、 bowerを使用して次のコマンドで入力します。bower install paper-input

問題は、表示されていませんが、ページを調べるときにシャドードムに表示されています。 h2タグ内のすべてが表示されます。繰り返しますが、ポリマーにはまったく新しいものなので、間違っていることはありますか?

+0

は、あなたの 'ログイン-page'要素に'紙input'要素をインポートしているあなたのページでそれをインポートしますか?あなたは1.Xのバージョンではなく、2.0のバージョンの要素をインストールしましたか? –

+0

以下の答えにしたがって、私は2.0バージョンをインストールしました。私はちょうどコマンドについてのいくつかの質問がある、私のコメントを参照してください – RandomStranger

答えて

1

Polymer 2.0を使用している場合は、#2.0-previewという接尾辞を持つ要素をダウンロードする必要があります。あなたのケースでは

bower i --save PolymerElements/paper-input#2.0-preview 

、その後は

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

それは働いた!コマンドに関するいくつかの質問は、コマンドの 'i'の目的は何ですか?--saveとinstallの違いは何ですか? – RandomStranger

+0

これはインストールの省略形です。 '--save'は' bower.json'にこのコマンドを保存することを意味します。これは、将来のどこかで、すべての依存関係を1つのコマンド、 'bower install'でインストールできることを意味します。 '--save'フラグを使うことをお勧めします。一旦あなたのアプリを他の人と共有したいなら、 'bower_components'フォルダ全体を送る必要はありません。 'bower.json'と要素が –

+0

のあなたのフォルダだけが意味を持ちます、ありがとう! – RandomStranger

関連する問題