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의 대응이지만, 버전이 낡아서 좀 엄격하네요.
좋은 서비스가 있다면 평론을 받을 수 있다면 나는 매우 기쁠 것이다.잘 부탁드립니다.
Reference
이 문제에 관하여(Today's polymer element [paper-toast]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/IinoMasaki/items/bbbe16d6dda42df51d5d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)