Polymerチームによって公式に提供されるCustom Elementsの一つiron-elemnetsについて公式ドキュメントの説明を抄訳し紹介します。
iron-elementとは
アプリケーションを作成するための基本的な構成要素です。iron elemmetsの多くは、PolymerがDeveloper Previewバージョンであった頃はcore elementsと呼ばれていたものです。
iron-a11y-announcer
スクリーンリーダーを利用しテキストの読み上げをサポートするためのエレメント
iron-a11y-announcerは、スクリーンリーダーを通じてオンデマンドの音声読み上げを必要とする機能に、a11yを追加するためのシングルトンのエレメントです。 音声読み上げを利用するには、アナウンスを行うエレメント内でアナウンスの利用可否を確認するのがよいでしょう。
iron-a11y-keys
iron-a11y-keys-behaviorを実装するための基礎となるエレメント
iron-a11y-keys
はキーボードによるコマンド入力をクロスブラウザーにサポートするためのインターフェイスを提供します。インターフェイスは、WAI-ARIAのベストプラクティスに準拠しており、WAI-AREAで定義されたキータッチのフィルタリングに関する表現構文を利用します。
iron-a11y-keys-behavior
a11yによるキーバインディングの動作をより便利なものにするエレメント
Polymer.IronA11yKeysBehavior
はWAI-ARIAのベストプラクティスに準拠した標準化されたキーボードによるコマンド入力のインターフェイスを提供します。このエレメントは、キーボードのイベントに関するブラウザの違いを吸収したWAI-AREAの表現構文を使用しキータッチをフィルタリングします。
iron-ajax
Ajaxによるリクエストをより簡単にしてくれるエレメント
iron-ajax
はネットワークリクエストに関して便利な機能セットを提供しています。
iron-autogrow-textarea
iron-autogrow-textarea
は入力の行数に応じて高さを調整するエレメント
iron-autogrow-textarea
は入力の行数に応じて高さを調整するエレメントです。明示的にheight
またはmaxRows
プロパティを設定しない限りスクロールされることはありません。
iron-behaviors
focused
やdisabled
やactive
のような状態のコントロールを管理するBehaviorsエレメント
iron-collapse
ターゲットエレメントに折りたたみ可能な振る舞いを追加するエレメント
iron-collapse
は折りたたみ可能なコンテンツのブロックを作成してくれます。コンテンツは展開したり閉じたりすることができます。opened
やtoggle()
を使うことでコンテンツのshow/hideの状態を切り替えできます。
iron-component-page
再利用可能なランディングページを生成するエレメント
iron-component-page
は Custom ElementsやMixin、Classなどのに関するドキュメントをフルページで閲覧可能にしてくれます。
iron-demo-helpers
デモページを簡単に作成するためのユーティリティクラス
iron-doc-viewer
Polymerのドキュメントを閲覧するためのエレメント
Custom ElementsやMixin、Classなどに関するドキュメントを表示するためのエレメントのコレクションです。
iron-dropdown
ネイティブブラウザの提供するselet要素と同様に動作するエレメント
<iron-dropdown>
はドロップダウン式のコンテンツのように状態の変化に応じて表示/非表示を管理する場合に便利なエレメントです。
iron-fit-behavior
あるエレメントを別のエレメント内部にフィットさせて配置するためのエレメント
Polymer.IronFitBehavior
はmax-height
やmax-width
を使ってあるエレメントを別のエレメント内部にフィットさせて表示する場合に利用されます。またwinddwや他のエレメントの中央に表示させることも可能です。
iron-flex-layout
クラスプラットフォームなflex boxレイアウトを実現するためのスタイルミックスイン
<iron-flex-layout>
コンポーネントはFlexboxとして知られるCSSの可変的なボックスレイアウトを利用するためのシンプルな方法を提供します。
iron-icon
単一のアイコンを表示するためのエレメント
iron-icon
エレメントはアイコンを表示するためのものです。デフォルトではアイコンは24pxのサイズで描画されます。
iron-icons
iron-icon
と一緒に利用されるアイコンセット
iron-icons
はiron-iconset
エレメントやiron-iconset-svg
エレメントで定義されたアイコンをデフォルトのアイコンセットとして利用するための汎用的なインポート機能を提供します。
iron-iconset
スプライトシートに表現されたソースを取り扱うためのエレメント
iron-iconset-svg
エレメントはユーザーが独自に画像ファイル上にアイコンのセットを定義し利用することを可能にします。
iron-iconset-svg
インラインのSVG画像のコレクションのソースを取り扱うためのエレメント
iron-iconset-svg
エレメントはユーザーが独自にSVGアイコンのセットを定義し利用することを可能にします。
iron-image
サイズの設定と事前読み込みのオプションを備えたimageエレメント
iron-image
は標準の<img>
タグでは提供されない、サイズの設定や事前読み込みといった便利なオプションを備えた画像を表示するためのエレメントです。
iron-jsonp-library
JSONPライブラリをロードするエレメント
iron-list
virtualな「無限リスト」を実現するエレメント
iron-listによってvirtualな「無限リスト」を表示できます。iron-list
エレメント内部のtemplateはリストアイテムを生成するためのDOMを表します。items
プロパティは配列形式のリストのアイテムデータです。
iron-location
ページURLのバインディングを管理するためのPolymerエレメント
iron-location
エレメントは現在のURLと双方向にバインドを管理します。
iron-media-query
CSSメディアクエリとのデータバインディングを提供するエレメント
iron-media-query
はCSSメディアクエリとのデータバインディングを利用可能にします。query
プロパティは、生のCSSメディクエリです。query-matches
プロパティはページがメディアクエリにマッチするかどうかを真偽値で表現します。
iron-overlay-behavior
特定のエレメントをオーバーレイ可能にしてくれるエレメント(オブションでバックドロップを設定することも可能)
Polymer.IronOverlayBehavior
を使って、他のコンテンツ上にオーバーレイしながら表示/非表示の切り替えが可能なエレメントを実装することができます。またオプションでバックドロップを設定したり、一度に複数のオーバーレイを重ねて表示することもでき、多様なダイアログのUIを表現するのに利用できます。
iron-pages
シンプルなコンテンツの切り替えができるエレメント
iron-pages
は複数の中から特定の子を選択して表示するのに使われます。例えば、子ページのリストを順番に表示する場合です。
iron-swipeable-container
ネストされた子をスワイプ可能にしてくれるコンテナエレメント
<iron-swipeable-container>
はネストされたどんな子も(ネイティブ要素もCustom Elementsも)スワイプ可能にしてくれるコンテナです。デフォルトでは曲線または水平方向の移動をサポートしますが、遷移の長さや各種プロパティはカスタマイズ可能です。
iron-test-helpers
エレメントのテストを容易にしてくれるユーティリティクラス