アプリケーションへの新規ビュー追加が済み、ビューの細かい箇所を構築するスタートラインに立ちました。

この過程において、例えばwebcomponents.orgのような既成のコンポーネントを使用したいと思うかもしれません。

インストールしたいコンポーネントを特定したら、コンポーネントのbowerパッケージ名を探してください。

本ステップでは、webcomponents.orgに掲載されているPolymerの<paper-checkbox>エレメントをアプリケーションに追加します。Bowerを使用してインストールすることができます。

プロジェクトのルートディレクトリから次のコマンドを実行してください:

bower install --save PolymerElements/paper-checkbox
  1. テキストエディタでsrc/my-new-view.htmlを開きます。

  2. 依存ファイルであるpaper-checkbox.htmlをimportします。

    既存のpolymer-element.htmlを読み込んでいる文の下部に、次の文を追加します:

    <link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
    
  3. テンプレートに<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を見つけられるはずです:

Example of page with checkbox

サードパーティのコンポーネントをページに追加しました。次は、Webへのアプリケーションのデプロイ方法を学んでいきます。