blob: 126388349b556bda89d225c6031a8457ccde40a5 [file] [log] [blame]
<!doctype html>
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
The complete set of contributors may be found at
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../paper-toast.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<style is="custom-style" include="demo-pages-shared-styles"></style>
<body unresolved class="centered">
<h3>Toast auto-closes after 3 seconds. Only one toast per time will be visible</h3>
<demo-snippet class="centered-demo">
<paper-button raised onclick="">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>
<demo-snippet class="centered-demo">
.yellow-button {
text-transform: none;
color: #eeff41;
<paper-button raised onclick="">Persistent toast</paper-button>
<paper-toast id="toast1" duration="0" 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>
<h3>Toast can be styled</h3>
<demo-snippet class="centered-demo">
<style is="custom-style">
#toast2 {
--paper-toast-background-color: red;
--paper-toast-color: white;
<paper-button raised onclick="">Styled toast</paper-button>
<paper-toast id="toast2" class="fit-bottom" text="This toast is red and fits bottom!"></paper-toast>
<h3>Toast can fit into any element</h3>
<demo-snippet class="centered-demo">
#container {
padding: 100px;
border: 1px solid gray;
<div id="container">
<paper-button raised onclick="">Open toast</paper-button>
<paper-toast id="toast3" class="fit-bottom" text="This toast fits into the container."></paper-toast>
toast3.fitInto = container;