Y.A.M の雑記帳: polymer メモ

http://www.polymer-project.org/

■ 外部の 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）

view plain print ?

<polymer-element name="my-counter" attributes="counter">
<template>
<style> /*...*/ </style>
<div id="label"><content></content></div>
Value: <span id="counterVal">{{counter}}</span>
<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

view plain print ?

<body unresolved>
...
</body>

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

■ Tabの基本構成

view plain print ?

<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>
</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

view plain print ?

<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> のスタイルを指定することになる）

view plain print ?

<template>
<style>
:host {
...
}
</style>
...
</template>

■ 独自 element の子 element

view plain print ?

<post-card>
<h2>hoge</h2>
</post-card>

のように、独自 element に子 element を入れる場合、insertion point を指定しないと描画されない

insertion point は <content> で作成する

view plain print ?

<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 を使う

view plain print ?

<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 ルールにどのように変換するかを指定する

Y.A.M の雑記帳

2014年6月26日木曜日

polymer メモ

0 件のコメント:

コメントを投稿