@polymer/paper-toast


<paper-toast>

paper-toast provides a subtle notification toast. Only one paper-toast 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

`

is affected by the stacking context of its container. Adding inside elements that create a new stacking context - e.g. , or - might result in toasts partially obstructed or clipped. Add to the top level () element, outside the structure, e.g.:

`html




`

You can then use custom events to communicate with it from within child components, using addEventListener and dispatchEvent.

$3

The following custom properties and mixins are available for styling:

| Custom property | Description | Default |
| --- | --- | --- |
| --paper-toast-background-color | The paper-toast background-color | #323232 |
| --paper-toast-color | The paper-toast color | #f1f1f1 |

This element applies the mixin --paper-font-common-base but does not import paper-styles/typography.html.
In order to apply the Roboto font to this element, make sure you've imported paper-styles/typography.html.

See: Documentation,
Demo.

Usage

$3


`
npm install --save @polymer/paper-toast
`

$3

`html








`

$3

`js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-toast/paper-toast.js';

class SampleElement extends PolymerElement {
static get template() {
return html

;
}
}
customElements.define('sample-element', SampleElement);
`

Contributing

If you want to send a PR to this element, here are
the instructions for running the tests and demo locally:

$3

`sh
git clone https://github.com/PolymerElements/paper-toast
cd paper-toast
npm install
npm install -g polymer-cli
`

$3

`sh
polymer serve --npm
open http://127.0.0.1:/demo/
`

$3

`sh
polymer test --npm
``