2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

PolymerAdvent Calendar 2017

Day 13

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

Posted at

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

app-layout

アプリケーションのレイアウトの構築に便利なエレメントのコレクション

公式サイトのApptoolboxの解説にこれらのエレメントの画像付きの詳細な解説があります。実際にアプリケーションを作成する際は参考にしてください。

また、app-headerとapp-toolbarの各種オプションの実例については、以下のサイトが参考になります。
Test Drive

DEMO & API

app-box

app-boxは各種スクロールエフェクトを備えたコンテナエレメントです。スクロールポジションに応じ視覚的なエフェクトが発生します。

app-drawer

app-drawerは、画面の左右でスライドによって開閉されるドロワー型ナビゲーションです。

app-drawer-layout

app-drawer-layoutは、app-drawerとその他コンテンツによって構成されるエレメントのラッパーの役割を担い、drawer付きの画面レイアウトを簡単に構築できます。

app-grid

app-grid@mediaルール内部で定義されたカスタムプロパティを利用したフラッド(fluid)グリッド式のレスポンシブレイアウトを作成するのに便利なヘルパークラスです。

app-header

app-headerは画面の上部にスクロールエフェクト付きのapp-toolbarを使って画面を構成する際に使えるコンテナエレメントです。

app-header-layout

app-header-layoutapp-headerとその他のコンテンツによって構成されるエレメントのラッパーの役割を担い、ヘッダー付の画面レイアウトを柔軟に構成するのに役立ちます。

app-toolbar

app-storage

アプリ内のデータを管理するための便利なツール群を提供するエレメント

DEMO & API

app-indexeddb-mirror

app-indexeddb-mirrorは、indexedDBへキャッシュを行うことで、アプリケーションデータへリードオンリーのオフラインアクセス機能を容易な実装を可能にしてくれるエレメントです。

app-localstorage-document

app-localstorage-documentはインメモリの値とブラウザのローカルストレージシステム内のデータを同期するためのエレメントです。これによってPolymerのデータバインディングを使いローカルストレージを活用したアプリケーションを簡単に開発できます。

app-pouchdb

Custom ElemntsとPouchDBの連携に便利なエレメント

DEMO & API

app-pouchdb-conflict-resolution

app-pouchdb-conflict-resolutionは宣言的な設定により、DOM内の論理的な関係によって順位づけを行うことで競合の回避を行ってくれます。

app-pouchdb-document

app-pouchdb-documentPolymer.AppStorageBehaviorの実装によって、個々のPouchDBドキュメントへの読み書きを管理するためのエレメントです。

app-pouchdb-index

app-pouchdb-indexはデータベースの索引づけ(indexing)を宣言的でべき等な設定によって行なってくれます。

app-pouchdb-query

app-pouchdb-queryはPouchDBへ宣言的でリードオンリーなクエリの発行を可能とします。

app-route

クライアントサイドのモジジュラー式のルーティング機能を提供するエレメントです。

実際のアプリケーションでの利用例は公式サイトのAppToolboxの解説が参考になります。

DEMO & API

app-location

app-locationはブラウザのロケーションバーとアプリケーションのステータスを同期するのに便利なエレメントです。app-locationを一度生成すると以後、ブラウザによって管理されるグローバルロケーションの変更をアプリケーション内から自動的に管理することができます。

app-route-converter

app-route-converterは、routeオブジェクトとパスやクエリパラメーターの相互変換を行なってくれるエレメントです。

app-route

app-routeを使えば、ウェブアプリケーションのルーティングをエレメント自身が宣言的な記法で自己記述的に設定できるようになります。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?