@npm-polymer/paper-toast
@npm-polymer/paper-toast
npm i @npm-polymer/paper-toast
Deprecated!
Please use @polymer packages instead
@npm-polymer/paper-toast

@npm-polymer/paper-toast

A Material Design popup toast

by PolymerElements

2.0.0 (see all)License:http://polymer.github.io/LICENSE.txtTypeScript:Not Found
npm i @npm-polymer/paper-toast
Readme

Build status

Demo and API docs

<paper-toast>

Material design: Snackbars & toasts

paper-toast provides a subtle notification toast. Only one paper-toast will be visible on screen.

Use opened to show the toast:

Example:

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

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

Example:

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

...

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

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

Example:

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

Styling

The following custom properties and mixins are available for styling:

Custom propertyDescriptionDefault
--paper-toast-background-colorThe paper-toast background-color#323232
--paper-toast-colorThe 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.

Downloads/wk

1

GitHub Stars

53

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

34

OPEN ISSUES

4

OPEN PRs

5
VersionTagPublished
2.0.0
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate