2014年6月26日木曜日

polymer メモ



■ 外部の element を使うには、import し、

<link rel="import" href="../components/core-header-panel/core-header-panel.html">

element をタグとして使う

<core-header-panel>
...
</core-header-panel>



■ 自分で element を作ることもできる

element を作るには、<polymer-element> を使って定義する

Shadow DOM (<template>)で他の element をカプセル化できる
ここで指定したスタイルはこのマークアップにだけ提供され、他のところに影響しない
Shadow DOM polyfill docs

公開されたプロパティ(この例だと "counter")はマークアップから初期化でき、値が変更されたときは変更のハンドラーが呼ばれる

{{ }} でプロパティを直接マークアップにバンドルできる

element の定義で on-[event](この例だと on-tap)属性を使ってイベントハンドラを function にバンドルできる

template の子は id 属性の値を使って、this.$.[id] で参照できる(この例だと this.$.counterVal)

<polymer-element name="my-counter" attributes="counter"> <template> <style> /*...*/ </style> <div id="label"><content></content></div> Value: <span id="counterVal">{{counter}}</span><br> <button on-tap="{{increment}}">Increment</button> </template> <script> Polymer({ counter: 0, // Default value counterChanged: function() { this.$.counterVal.classList.add('highlight'); }, increment: function() { this.counter++; } }); </script> </polymer-element>

作った element をタグとして使う

<my-counter counter="10">Points</my-counter>



■ body unresolved <body unresolved> ... </body> <body> の unresolved 属性は、カスタムエレメントのネイティブサポートが足りないブラウザでの flash of unstyled content (FOUC) を防ぐのに使われる

■ Tabの基本構成 <core-header-panel> <core-toolbar> <paper-tabs valueattr="name" selected="all" self-end> <paper-tab name="all">ALL</paper-tab> <paper-tab name="favorites">FAVORITES</paper-tab> </paper-tabs> </core-toolbar> <!-- main page content will go here --> </core-header-panel> <paper-tab ...><img src="ic_all.png"></paper-tab> のように画像もOK



■ 独自 element を1つの html ファイルにする

- 必要な element の import + <polymer-element>
- polymer-element の name 属性値をファイル名に使う(must じゃないが、そのほうがわかりやすい)
- 最後に Polymer({}); を呼んで element を登録する。これによりブラウザに認識される

post-card.html <link rel="import" href="../components/polymer/polymer.html"> <link rel="import" href="../components/core-icon-button/core-icon-button.html"> <polymer-element name="post-card"> <template> ... </template> <script> Polymer({}); </script> </polymer-element> Shadow DOM 内での :host pseudo-class は、独自 element 自身をさすことになる(上のコードだと <post-card> のスタイルを指定することになる) <template> <style> :host { ... } </style> ... </template>



■ 独自 element の子 element <post-card> <h2>hoge</h2> </post-card> のように、独自 element に子 element を入れる場合、insertion point を指定しないと描画されない

insertion point は <content> で作成する <polymer-element name="post-card"> <template> <style> ... </style> <div class="card-header" layout horizontal center> <content select="img"></content> <content select="h2"></content> </div> <content></content> </template> ... </polymer-element> この場合、<post-card> 内の <img> は最初の content に挿入され、 <h2> は2番目の content に挿入され、 それ以外の子 element は最後の content に挿入される

子 element のスタイルには ::content pseudo element を使う <polymer-element name="post-card"> <template> <style> ... polyfill-next-selector { content: ".card-header h2";} .card-header ::content h2 { margin: 0; font-size: 1.8rem; font-weight: 300; } polyfill-next-selector { content: ".card-header img";} .card-header ::content img { width: 70px; border-radius: 50%; margin: 10px; } </style> ... </template> ... </polymer-element> Shadow DOM をネイティブにサポートしていないブラウザのために、 polyfill-next-selector を使って、::content ルールを non-shadow DOM ルールにどのように変換するかを指定する



0 件のコメント:

コメントを投稿