今の状態だと、エレメントにはあまり動きがありません。このステップでは、マークアップ、属性、JavaScript、プロパティなどからアイコンに設定できる基本的なAPIを紹介します。

まず、データバインディングについて少し説明します。次のように、HTMLマークアップで使用できるtoggleIconプロパティを作成します:

<iron-icon icon="[[toggleIcon]]"></iron-icon>

これを正しく動かすには、toggleIconをプロパティとして宣言する必要があります。

次に、toggleIconプロパティの宣言を追加します。

scriptタグを見つけ、エレメントのクラス定義に次のプロパティを追加します:

icon-toggle.html: Before

<script>
  class IconToggle extends Polymer.Element {
    static get is() {
      return "icon-toggle";
    }
    constructor() {
      super();
    }
  }
  customElements.define(IconToggle.is, IconToggle);
</script>

icon-toggle.html: After

<script>
  class IconToggle extends Polymer.Element {
    static get is() {
    return "icon-toggle";
    }
    static get properties() {
      return {
        toggleIcon: {
          type: String
        },
      }
    }
    constructor() {
      super();
    }
  }
  customElements.define(IconToggle.is, IconToggle);
</script>

重要事項:

  • HTMLで使用するためにプロパティを宣言する必要があります。
  • この単純なプロパティ宣言には、型(この場合はString)の定義が含まれています。

詳細: デシリアライズ属性。 宣言されたプロパティの型定義は、Polymerが属性値(常に文字列値)をJavaScriptプロパティ値に変換またはデシリアライズする方法に影響します。 デフォルトはStringなので、このtoggleIconの宣言は形だけのものです。詳細は、Polymerドキュメントの属性のデシリアライズを参照してください。

次に、<iron-icon>エレメントを見つけて、icon属性の値を "polymer"から"[[toggleIcon]]"に変更します。

icon-toggle.html

<!-- local DOM goes here -->
<iron-icon icon="[[toggleIcon]]">
</iron-icon>

重要事項:

  • toggleIconは、トグルボタンエレメントで定義されるプロパティです。まだデフォルト値は設定されていません。

  • icon="[[toggleIcon]]"という代入は、データバインディングと呼ばれるものです。エレメントのtoggleIconプロパティ<iron-icon>iconプロパティにリンクしています。

これで、エレメントを使うだけでなく、マークアップやJavaScriptを使うことでtoggleIconプロパティを設定できるようになりました。 新しいアイコンがどこから来ているのか知りたければ、demoフォルダのdemo-element.htmlを見てください。

以下のような記述を確認できるはずです:

demo-element.html—既存のデモコード

<icon-toggle toggle-icon="star" pressed></icon-toggle>

これらの行は すでに記述されている ため、新しく追加する必要はありません。これらの行は、画面上に表示されるデモの一部です。 しかし、自分で試してみたい場合は、新しい<icon-toggle>エレメントをdemo-element.htmlファイルに追加してみてください。 addmenusettingsなどの名前のアイコンを試しに追加することができます。

詳細: 属性およびプロパティ名。 上記のマークアップはtoggleIconではなくtoggle-iconを使用していることに注意しましょう。 Polymerでは、属性名はダッシュケースを使用しプロパティ名はキャメルケースで表します。 詳細については、Polymerライブラリのドキュメントのプロパティ名と属性名のマッピングを参照してください。

propertiesブジェクトは、さらにいくつかの機能をサポートしています。pressedプロパティのサポートを追加するには、次の行を追加します:

icon-toggle.html: Before

<script>
  class IconToggle extends Polymer.Element {
    static get is() {
    return "icon-toggle";
    }
    static get properties() {
      return {
        toggleIcon: {
          type: String
        },
      }
    }
    constructor() {
      super();
    }
  }
  customElements.define(IconToggle.is, IconToggle);
</script>

icon-toggle.html: After

<script>
  class IconToggle extends Polymer.Element {
    static get is() {
    return "icon-toggle";
    }
    static get properties() {
      return {
        pressed: {
          type: Boolean,
          notify: true,
          reflectToAttribute: true,
          value: false
        },
        toggleIcon: {
          type: String
        },
      }
    }
    constructor() {
      super();
    }
  }
  customElements.define(IconToggle.is, IconToggle);
</script>

重要事項:

  • このより複雑なプロパティの場合、複数のフィールドを持つ構成のオブジェクトを指定します。
  • valueは、プロパティのdefault valueを指定しています。
  • notifyプロパティは、プロパティの値が変更されたときにプロパティ変更イベントをディスパッチするようPolymerに指示します。これにより、他のノードによって変更が監視されるようになります。
  • reflectToAttributeプロパティは、プロパティが変更されたとき、対応する属性を更新するようにPolymerに指示をします。これにより、icon-toggle[pressed]のような属性セレクタを使用してエレメントをスタイリングすることができます。

詳細: notify 及び reflectToAttribute notifyプロパティとreflectToAttributeプロパティは同じように 見える かもしれません: これらは両方とも、エレメントの状態を外の世界に見えるようにしています。 reflectToAttributeは、 DOMツリーの中 で状態を可視化するため、CSSおよびquerySelectorメソッドに対して可視化されます。 notifyは、JavaScriptのイベントハンドラまたはPolymerの双方向データバインディングのいずれかを使用して、エレメントの外側から状態の変化をオブザーバブルにします。

これで、エレメントが押されtoggleIconプロパティが動作しています。

デモをリロードすると、前のステップでハードコードされたアイコンに代わりスターとハートのアイコンが表示されるはずです:

Demo showing icon toggles with star and heart icons

Previous step: ローカルDOMの追加 Next step: インプットに反応させる