Polymer公式エレメントの紹介(iron-element編)

Polymerチームによって公式に提供されるCustom Elementsの一つiron-elemnetsについて公式ドキュメントの説明を抄訳し紹介します。

# iron-elementとは

アプリケーションを作成するための基本的な構成要素です。iron elemmetsの多くは、PolymerがDeveloper Previewバージョンであった頃はcore elementsと呼ばれていたものです。

## iron-a11y-announcer

**スクリーンリーダーを利用しテキストの読み上げをサポートするためのエレメント**

iron-a11y-announcerは、スクリーンリーダーを通じてオンデマンドの音声読み上げを必要とする機能に、a11yを追加するためのシングルトンのエレメントです。 音声読み上げを利用するには、アナウンスを行うエレメント内でアナウンスの利用可否を確認するのがよいでしょう。

[DEMO & API](https://www.webcomponents.org/element/PolymerElements/iron-a11y-announcer)

## iron-a11y-keys 

**iron-a11y-keys-behaviorを実装するための基礎となるエレメント**

`iron-a11y-keys`はキーボードによるコマンド入力をクロスブラウザーにサポートするためのインターフェイスを提供します。インターフェイスは、[WAI-ARIAのベストプラクティス](https://www.w3.org/TR/wai-aria-practices/#kbd_general_binding)に準拠しており、WAI-AREAで定義されたキータッチのフィルタリングに関する表現構文を利用します。

[DEMO & API](https://www.webcomponents.org/element/PolymerElements/iron-a11y-keys/elements/iron-a11y-keys)

## iron-a11y-keys-behavior

**a11yによるキーバインディングの動作をより便利なものにするエレメント**

`Polymer.IronA11yKeysBehavior`は[WAI-ARIAのベストプラクティス](http://www.w3.org/TR/wai-aria-practices/#kbd_general_binding)に準拠した標準化されたキーボードによるコマンド入力のインターフェイスを提供します。このエレメントは、キーボードのイベントに関するブラウザの違いを吸収したWAI-AREAの表現構文を使用しキータッチをフィルタリングします。

[DEMO & API](https://elements.polymer-project.org/elements/iron-a11y-keys-behavior)

## iron-ajax

**Ajaxによるリクエストをより簡単にしてくれるエレメント**

`iron-ajax`はネットワークリクエストに関して便利な機能セットを提供しています。

[DEMO & API](https://elements.polymer-project.org/elements/iron-ajax)

## iron-autogrow-textarea

**`iron-autogrow-textarea`は入力の行数に応じて高さを調整するエレメント**

`iron-autogrow-textarea`は入力の行数に応じて高さを調整するエレメントです。明示的に`height`または`maxRows`プロパティを設定しない限りスクロールされることはありません。

[DEMO & API](https://elements.polymer-project.org/elements/iron-autogrow-textarea)

## iron-behaviors

**`focused`や`disabled`や`active`のような状態のコントロールを管理するBehaviorsエレメント**

[DEMO & API](https://elements.polymer-project.org/elements/iron-behaviors)

## iron-collapse

**ターゲットエレメントに折りたたみ可能な振る舞いを追加するエレメント**

`iron-collapse`は折りたたみ可能なコンテンツのブロックを作成してくれます。コンテンツは展開したり閉じたりすることができます。`opened`や`toggle()`を使うことでコンテンツのshow/hideの状態を切り替えできます。

[DEMO & API](https://www.webcomponents.org/element/PolymerElements/iron-collapse)

## iron-component-page

**再利用可能なランディングページを生成するエレメント**

`iron-component-page`は Custom ElementsやMixin、Classなどのに関するドキュメントをフルページで閲覧可能にしてくれます。

[DEMO & API](https://www.webcomponents.org/element/PolymerElements/iron-component-page)

## iron-demo-helpers 

**デモページを簡単に作成するためのユーティリティクラス**

[DEMO & API](https://www.webcomponents.org/element/PolymerElements/iron-demo-helpers)

## iron-doc-viewer
**Polymerのドキュメントを閲覧するためのエレメント**

Custom ElementsやMixin、Classなどに関するドキュメントを表示するためのエレメントのコレクションです。

[DEMO & API](https://www.webcomponents.org/element/PolymerElements/iron-doc-viewer)

## iron-dropdown 

**ネイティブブラウザの提供するselet要素と同様に動作するエレメント**


`<iron-dropdown>`はドロップダウン式のコンテンツのように状態の変化に応じて表示/非表示を管理する場合に便利なエレメントです。

[DEMO & API](https://elements.polymer-project.org/elements/iron-dropdown)

## iron-fit-behavior 

**あるエレメントを別のエレメント内部にフィットさせて配置するためのエレメント**

`Polymer.IronFitBehavior`は`max-height`や`max-width`を使ってあるエレメントを別のエレメント内部にフィットさせて表示する場合に利用されます。またwinddwや他のエレメントの中央に表示させることも可能です。


[DEMO & API](https://www.webcomponents.org/element/PolymerElements/iron-fit-behavior)

## iron-flex-layout

**クラスプラットフォームなflex boxレイアウトを実現するためのスタイルミックスイン**

`<iron-flex-layout>`コンポーネントはFlexboxとして知られる[CSSの可変的なボックスレイアウト](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)を利用するためのシンプルな方法を提供します。

[DEMO & API](https://www.webcomponents.org/element/PolymerElements/iron-flex-layout)

## iron-icon 

**単一のアイコンを表示するためのエレメント**

`iron-icon`エレメントはアイコンを表示するためのものです。デフォルトではアイコンは24pxのサイズで描画されます。

[DEMO & API](https://www.webcomponents.org/element/PolymerElements/iron-icon)

## iron-icons 

**`iron-icon`と一緒に利用されるアイコンセット**

`iron-icons`は`iron-iconset`エレメントや`iron-iconset-svg`エレメントで定義されたアイコンをデフォルトのアイコンセットとして利用するための汎用的なインポート機能を提供します。

[DEMO & API](https://www.webcomponents.org/element/PolymerElements/iron-icons)

## iron-iconset 

**スプライトシートに表現されたソースを取り扱うためのエレメント**

`iron-iconset-svg`エレメントはユーザーが独自に画像ファイル上にアイコンのセットを定義し利用することを可能にします。

[DEMO & API](https://www.webcomponents.org/element/PolymerElements/iron-iconset)

## iron-iconset-svg 

**インラインのSVG画像のコレクションのソースを取り扱うためのエレメント**

`iron-iconset-svg`エレメントはユーザーが独自にSVGアイコンのセットを定義し利用することを可能にします。


[DEMO & API](https://www.webcomponents.org/element/PolymerElements/iron-iconset-svg)

## iron-image 

**サイズの設定と事前読み込みのオプションを備えたimageエレメント**

`iron-image`は標準の`<img>`タグでは提供されない、サイズの設定や事前読み込みといった便利なオプションを備えた画像を表示するためのエレメントです。

[DEMO & API](https://www.webcomponents.org/element/PolymerElements/iron-image)

## iron-jsonp-library

**JSONPライブラリをロードするエレメント**

[DEMO & API](https://elements.polymer-project.org/elements/iron-jsonp-library)

## iron-list 

**virtualな「無限リスト」を実現するエレメント**

iron-listによってvirtualな「無限リスト」を表示できます。`iron-list`エレメント内部のtemplateはリストアイテムを生成するためのDOMを表します。`items`プロパティは配列形式のリストのアイテムデータです。

[DEMO & API](https://elements.polymer-project.org/elements/iron-list)

## iron-location 

**ページURLのバインディングを管理するためのPolymerエレメント**

`iron-location`エレメントは現在のURLと双方向にバインドを管理します。


[DEMO & API](https://elements.polymer-project.org/elements/iron-location)

## iron-media-query

**CSSメディアクエリとのデータバインディングを提供するエレメント**

`iron-media-query`はCSSメディアクエリとのデータバインディングを利用可能にします。`query`プロパティは、生のCSSメディクエリです。`query-matches`プロパティはページがメディアクエリにマッチするかどうかを真偽値で表現します。

[DEMO & API](https://elements.polymer-project.org/elements/iron-media-query)

## iron-overlay-behavior

**特定のエレメントをオーバーレイ可能にしてくれるエレメント(オブションでバックドロップを設定することも可能)**

`Polymer.IronOverlayBehavior`を使って、他のコンテンツ上にオーバーレイしながら表示/非表示の切り替えが可能なエレメントを実装することができます。またオプションでバックドロップを設定したり、一度に複数のオーバーレイを重ねて表示することもでき、多様なダイアログのUIを表現するのに利用できます。

[DEMO & API](https://elements.polymer-project.org/elements/iron-overlay-behavior)

## iron-pages 

**シンプルなコンテンツの切り替えができるエレメント**

`iron-pages`は複数の中から特定の子を選択して表示するのに使われます。例えば、子ページのリストを順番に表示する場合です。

[DEMO & API](https://elements.polymer-project.org/elements/iron-pages)

## iron-swipeable-container

**ネストされた子をスワイプ可能にしてくれるコンテナエレメント**

`<iron-swipeable-container>`はネストされたどんな子も(ネイティブ要素もCustom Elementsも)スワイプ可能にしてくれるコンテナです。デフォルトでは曲線または水平方向の移動をサポートしますが、遷移の長さや各種プロパティはカスタマイズ可能です。

[DEMO & API](https://elements.polymer-project.org/elements/iron-swipeable-container)

## iron-test-helpers 

**エレメントのテストを容易にしてくれるユーティリティクラス**

[DEMO & API](https://www.webcomponents.org/element/PolymerElements/iron-test-helpers)