アプリケーションへの新規ビュー追加が済み、ビューの細かい箇所を構築するスタートラインに立ちました。
この過程において、例えばwebcomponents.orgのような既成のコンポーネントを使用したいと思うかもしれません。
既成のコンポーネントのインストール
インストールしたいコンポーネントを特定したら、コンポーネントのbowerパッケージ名を探してください。
本ステップでは、webcomponents.orgに掲載されているPolymerの<paper-checkbox>
エレメントをアプリケーションに追加します。Bowerを使用してインストールすることができます。
プロジェクトのルートディレクトリから次のコマンドを実行してください:
bower install --save PolymerElements/paper-checkbox
アプリケーションへのエレメント追加
-
テキストエディタで
src/my-new-view.html
を開きます。 -
依存ファイルである
paper-checkbox.html
をimportします。既存の
polymer-element.html
を読み込んでいる文の下部に、次の文を追加します:<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
-
テンプレートに
<paper-checkbox>
エレメントを追加します。<paper-checkbox>Ready to deploy!</paper-checkbox>
前の手順で追加した
<h1>
の下に追加します。新しいテンプレートは次のようになります:<!-- Defines the element's style and local DOM --> <template> <style> :host { display: block; padding: 16px; } </style> <h1>New view</h1> <paper-checkbox>Ready to deploy!</paper-checkbox> </template>
これで、新しいビューの中で動作しているpaper-checkbox
を見つけられるはずです:
次のステップ
サードパーティのコンポーネントをページに追加しました。次は、Webへのアプリケーションのデプロイ方法を学んでいきます。