これから毎日polymerのカタログから一つづつElementを紹介していきます。（紹介できるよう頑張ります）
環境構築やPolymerとはは別の機会に紹介できればと思います。
それでは、手始めにpaper-elementsから一つづつ紹介していこうと思います。
第1回目は paper-badge です。
What is paper-badge
paper-badgeとはステータスや通知を表示するために使います。
文字列やアイコンを表示することができ、適切に使えばユーザに何かイベントが発生していることを知らせることができます。
webサイトやスマホゲームの中でも頻繁に使われている機能ですね。
それではサンプルコードを見てみましょう。
Example
サンプルコード
index.html
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/iron-icons/communication-icons.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-icons/social-icons.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-badge/paper-badge.html">
<style>
.contents {
margin-top: 20px;
display: inline-block;
}
</style>
</head>
<body>
<div class="contents">
<paper-icon-button id="number" icon="communication:email" alt="inbox"></paper-icon-button>
<paper-badge for="number" label="4"></paper-badge>
<paper-icon-button id="icon" icon="account-box" alt="person"></paper-icon-button>
<paper-badge icon="social:mood" for="icon" label="happy"></paper-badge>
</div>
</body>
</html>
サンプル結果
for属性で指定したidの右上にバッジが表示されます。for属性を指定しない場合は親ノードに付くようです。
icon属性に表示したいiconを指定するとiconを表示することもできます。
以上です。
iconと組み合わせていろいろなものを表示できるので面白いですね。
次回はpaper-buttonを紹介しようと思います。