Today's polymer element [paper-toast]

第４回目は paper-toast です。

What is paper-toast

paper-toastはユーザー通知に使えるElementです。
opneかshowを呼ぶとトースターから飛び出す食パンの様に画面下からフェードインして表示されます。
画面下に控えめに表示されるため、ユーザーの操作を阻害する可能性が低くく簡易的な通知をすることを可能にします。

Example

サンプルコード

element-paper-toast.html

<dom-module id="element-toast">
  <link rel="import" href="bower_components/paper-button/paper-button.html">
  <link rel="import" href="bower_components/paper-toast/paper-toast.html">
  <template>
    <style is="custom-style">
      .container {
        padding: 10px;
        margin: 0;
      }
      .container > div {
        padding: 15px;
        margin: 5px;
        background-color: white;
        min-height: 20px;
      }
    </style>
    <div class="container">
      <!-- normal toast -->
      <paper-button raised on-click="openToast">Open Toast</paper-button>
      <paper-toast id="toast" text="toast..">
        <paper-button onclick="toast.toggle()">CLOSE</paper-button>
      </paper-toast>

      <!-- long toast -->
      <paper-button raised on-click="showLongToast">Show Long Toast</paper-button>
      <paper-toast id="long_toast" text="Long Toast duration: 5000ms" duration="5000"></paper-toast>
    </div>
  </template>
  <script>
    Polymer({
      is: 'element-toast',
      openToast: function () {
        this.$.toast.open();
      },
      showLongToast: function () {
        this.$.long_toast.show();
      }
    });
  </script>
</dom-module>

サンプル結果

WebPushなんかと組み合わせて使うとネイティブアプリのような通知が使えていいんじゃないかと思います。

paper-toastとは関係ありませんが、
polymerのデモに適したwebサービスを探しています。。
JSBinだとLibraryの対応はしているのですが、バージョンが古くてちょっと厳しいなあと。
いいサービスがあればコメントいただけると嬉しいです。よろしくお願いします。