https://github.com/zecat/paper-toast-patterns
Factorize your paper-toasts using patterns.
https://github.com/zecat/paper-toast-patterns
Last synced: over 1 year ago
JSON representation
Factorize your paper-toasts using patterns.
- Host: GitHub
- URL: https://github.com/zecat/paper-toast-patterns
- Owner: Zecat
- Created: 2016-01-16T23:30:24.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-06-07T15:28:40.000Z (about 9 years ago)
- Last Synced: 2025-02-22T12:06:41.479Z (over 1 year ago)
- Language: HTML
- Homepage:
- Size: 2.08 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# paper-toast-patterns
[Demo & Doc](http://zecat.github.io/paper-toast-patterns)
```
bower install --save Zecat/paper-toast-patterns
```
## 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
paper-toast[type="warn"] {
font-weight: bold;
--paper-toast-color: var(--google-red-500);
}
paper-toast[type="info"] {
--paper-toast-color: var(--google-blue-500);
}
```
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
warning
info
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.');
}
});
```
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"
}
});
```