Today's polymer element [paper-badge] #Polymer

これから毎日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を紹介しようと思います。