-
Notifications
You must be signed in to change notification settings - Fork 0
/
paper-toast-patterns.html
95 lines (82 loc) · 2.24 KB
/
paper-toast-patterns.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-signals/iron-signals.html">
<!--
## Factorize your paper-toasts using patterns.
First create some <paper-toast> as child of <paper-toast-patterns>, give them a 'type'
attribute to retrieve them later and configure/style them as you please.
Exemple :
```html
<style is="custom-style">
paper-toast[type="warn"] {
--paper-toast-color: red;
}
paper-toast[type="info"] {
--paper-toast-color: blue;
}
</style>
<paper-toast-patterns>
<paper-toast type="warn" duration="0" text="Warning message pattern">
</paper-toast>
<paper-toast type="info"></paper-toast>
</paper-toast-patterns>
```
Then, implement Zecat.PaperToastFirerBehavior in your favorite elements and use
fireToast(type, text) method to open the matching type toast. If text param
isn't provide, the text from your 'toast pattern' will be used.
Exemple :
```html
<dom-module id="toast-sender">
<template>
<paper-button on-tap="sendWarn">warning</paper-button>
<paper-button on-tap="sendInfo">info</paper-button>
</template>
<script>
Polymer({
is: 'toast-sender',
behaviors: [
Zecat.PaperToastFirerBehavior
],
sendWarn: function() {
this.fireToast('warn');
},
sendInfo: function() {
this.fireToast('info', 'A spermatozoid contains 37.5 mb of data.');
}
});
</script>
</dom-module>
```
You can also trigger yourself the toast from anywhere by firing an event
with this exact structure :
```js
this.fire('iron-signal', {
name: 'toast',
data: {
type: "your-type",
text: "your-text"
}
});
```
@demo demo/index.html
@hero hero.svg
-->
<dom-module id="paper-toast-patterns">
<template>
<iron-signals on-iron-signal-toast="_handleToast"></iron-signals>
<content></content>
</template>
<script>
Polymer({
is: 'paper-toast-patterns',
_handleToast: function(e) {
if(paperToast = this.queryEffectiveChildren(
'paper-toast[type="'+e.detail.type+'"]')) {
if (text = e.detail.text) {
paperToast.text = text;
}
paperToast.open();
}
}
});
</script>
</dom-module>