unplugged-system/external/chromium-trace/catapult/third_party/polymer/components/paper-toast
2025-10-06 13:59:42 +00:00
..
.github Initial commit: AOSP 14 with modifications for Unplugged OS 2025-10-06 13:59:42 +00:00
demo Initial commit: AOSP 14 with modifications for Unplugged OS 2025-10-06 13:59:42 +00:00
test Initial commit: AOSP 14 with modifications for Unplugged OS 2025-10-06 13:59:42 +00:00
.bower.json Initial commit: AOSP 14 with modifications for Unplugged OS 2025-10-06 13:59:42 +00:00
.travis.yml Initial commit: AOSP 14 with modifications for Unplugged OS 2025-10-06 13:59:42 +00:00
bower.json Initial commit: AOSP 14 with modifications for Unplugged OS 2025-10-06 13:59:42 +00:00
CONTRIBUTING.md Initial commit: AOSP 14 with modifications for Unplugged OS 2025-10-06 13:59:42 +00:00
hero.svg Initial commit: AOSP 14 with modifications for Unplugged OS 2025-10-06 13:59:42 +00:00
index.html Initial commit: AOSP 14 with modifications for Unplugged OS 2025-10-06 13:59:42 +00:00
paper-toast.html Initial commit: AOSP 14 with modifications for Unplugged OS 2025-10-06 13:59:42 +00:00
README.md Initial commit: AOSP 14 with modifications for Unplugged OS 2025-10-06 13:59:42 +00:00

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 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.