paper-toast

PolymerElements

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/PolymerElements/paper-toast/v2.0.0/paper-toast/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-toast.html">
<link rel="import" href="../paper-button/paper-button.html">

<style>
  .yellow-button{
    text-transform: none;
    color: #eeff41;
  }
</style>

<h3>Toast auto-closes after 3 seconds. Only one toast per time will be visible</h3>
<paper-button raised onclick="toast0.open()">Default toast</paper-button>
<paper-toast id="toast0" text="This toast auto-closes after 3 seconds"></paper-toast>

<h3>Toast does not auto-close when <code>duration</code> is negative, <code>0</code>, or <code>Infinity</code></h3>
<paper-button raised onclick="toast1.open()">Persistent toast</paper-button>
<paper-toast id="toast1" duration="Infinity" text="This toast will stay opened until you close it, or open another toast.">
  <paper-button onclick="toast1.toggle()" class="yellow-button">Close now!</paper-button>
</paper-toast>