Contact us Create app

Directory

← Back

cr-toast

A Clash Royale styled toast notification for Polymer 2.

Author

Rating

Links

Popularity

<100

[ This description is mirrored from README.md at github.com/Dabolus/cr-toast on 2019-05-22 ]

<cr-toast>

A Clash Royale styled toast notification for Polymer 2.

Only one cr-toast at a time will be visible on screen.

Use opened to show the toast:

Example:

<cr-toast text="Hello world!" opened></cr-toast>

Also open() or show() can be used to show the toast:

Example:

<cr-button on-click="openToast">Open Toast</cr-button>
<cr-toast id="toast" text="Hello world!"></cr-toast>

...

openToast: function() {
  this.$.toast.open();
}

Set duration to 0, a negative number or Infinity to persist the toast on screen:

Example:

<cr-toast text="Terms and conditions" opened duration="0">
  <a href="#">Show more</a>
</cr-toast>

This element applies the mixin --sc-ccbackbeat but does not import cr-fonts/cr-fonts.html. In order to apply the SC CCBackBeat font to this element, make sure you've imported cr-fonts/cr-fonts.html.

Compatibility

(Loading compatibility data...)

Last updated: 2017-10-21

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • polymer#Polymer/polymer#^2.0.0
  • iron-overlay-behavior#PolymerElements/iron-overlay-behavior#^2.0.0
Released
2017-10-21
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

cr-toast - Vaadin Add-on Directory

A Clash Royale styled toast notification for Polymer 2. cr-toast - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/Dabolus/cr-toast](https://github.com//Dabolus/cr-toast/blob/2.0.0/README.md) on 2019-05-22 ]** # \ A Clash Royale styled toast notification for Polymer 2. Only one `cr-toast` at a time will be visible on screen. Use `opened` to show the toast: Example: ```html ``` Also `open()` or `show()` can be used to show the toast: Example: ```html Open Toast ... openToast: function() { this.$.toast.open(); } ``` Set `duration` to 0, a negative number or Infinity to persist the toast on screen: Example: ```html Show more ``` This element applies the mixin `--sc-ccbackbeat` but does not import `cr-fonts/cr-fonts.html`. In order to apply the `SC CCBackBeat` font to this element, make sure you've imported `cr-fonts/cr-fonts.html`.
Online