tree: 6dbdee1af7ee1b10c38f108182b0e128b0297105 [path history] [tgz]
  1. .github/
  2. demo/
  3. test/
  4. .bower.json
  5. .gitignore
  6. .travis.yml
  7. bower.json
  8. CONTRIBUTING.md
  9. hero.svg
  10. index.html
  11. paper-toast.html
  12. README.md
polymer_1.8.1/bower_components/paper-toast/README.md

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.