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

iron-elementとは

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

iron-a11y-announcer

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

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

DEMO & API

iron-a11y-keys

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

iron-a11y-keysはキーボードによるコマンド入力をクロスブラウザーにサポートするためのインターフェイスを提供します。インターフェイスは、WAI-ARIAのベストプラクティスに準拠しており、WAI-AREAで定義されたキータッチのフィルタリングに関する表現構文を利用します。

DEMO & API

iron-a11y-keys-behavior

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

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

DEMO & API

iron-ajax

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

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

DEMO & API

iron-autogrow-textarea

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

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

DEMO & API

iron-behaviors

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

DEMO & API

iron-collapse

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

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

DEMO & API

iron-component-page

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

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

DEMO & API

iron-demo-helpers

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

DEMO & API

iron-doc-viewer

Polymerのドキュメントを閲覧するためのエレメント

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

DEMO & API

iron-dropdown

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

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

DEMO & API

iron-fit-behavior

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

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

DEMO & API

iron-flex-layout

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

<iron-flex-layout>コンポーネントはFlexboxとして知られるCSSの可変的なボックスレイアウトを利用するためのシンプルな方法を提供します。

DEMO & API

iron-icon

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

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

DEMO & API

iron-icons

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

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

DEMO & API

iron-iconset

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

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

DEMO & API

iron-iconset-svg

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

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

DEMO & API

iron-image

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

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

DEMO & API

iron-jsonp-library

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

DEMO & API

iron-list

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

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

DEMO & API

iron-location

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

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

DEMO & API

iron-media-query

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

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

DEMO & API

iron-overlay-behavior

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

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

DEMO & API

iron-pages

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

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

DEMO & API

iron-swipeable-container

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

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

DEMO & API

iron-test-helpers

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

DEMO & API