Today's polymer element [paper-toast]

5361 단어 Polymer
네 번째는 페이퍼토스트다.

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 같은 조합으로 사용하면 로컬 애플리케이션과 같은 알림을 사용할 수 있는 게 좋지 않을까 싶습니다.
페이퍼토스트와는 상관이 없지만.
polymer 프레젠테이션에 적합한 웹 서비스를 찾습니다.
JSBIN Library의 대응이지만, 버전이 낡아서 좀 엄격하네요.
좋은 서비스가 있다면 평론을 받을 수 있다면 나는 매우 기쁠 것이다.잘 부탁드립니다.

좋은 웹페이지 즐겨찾기