1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10 --> 11 <html> 12 13 <head> 14 <title>paper-toast</title> 15 16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 17 <meta name="mobile-web-app-capable" content="yes"> 18 <meta name="apple-mobile-web-app-capable" content="yes"> 19 20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 21 22 <link rel="import" href="../paper-toast.html"> 23 <link rel="import" href="../../paper-button/paper-button.html"> 24 <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> 25 <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> 26 27 <style is="custom-style" include="demo-pages-shared-styles"></style> 28 29 </head> 30 31 <body unresolved class="centered"> 32 <h3>Toast auto-closes after 3 seconds. Only one toast per time will be visible</h3> 33 <demo-snippet class="centered-demo"> 34 <template> 35 <paper-button raised onclick="toast0.open()">Default toast</paper-button> 36 <paper-toast id="toast0" text="This toast auto-closes after 3 seconds"></paper-toast> 37 </template> 38 </demo-snippet> 39 40 <h3>Toast does not auto-close when <code>duration</code> is negative, <code>0</code>, or <code>Infinity</code></h3> 41 <demo-snippet class="centered-demo"> 42 <template> 43 <style> 44 .yellow-button { 45 text-transform: none; 46 color: #eeff41; 47 } 48 </style> 49 50 <paper-button raised onclick="toast1.open()">Persistent toast</paper-button> 51 52 <paper-toast id="toast1" duration="0" text="This toast will stay opened until you close it, or open another toast."> 53 <paper-button onclick="toast1.toggle()" class="yellow-button">Close now!</paper-button> 54 </paper-toast> 55 </template> 56 </demo-snippet> 57 58 <h3>Toast can be styled</h3> 59 <demo-snippet class="centered-demo"> 60 <template> 61 <style is="custom-style"> 62 #toast2 { 63 --paper-toast-background-color: red; 64 --paper-toast-color: white; 65 } 66 </style> 67 68 <paper-button raised onclick="toast2.open()">Styled toast</paper-button> 69 70 <paper-toast id="toast2" class="fit-bottom" text="This toast is red and fits bottom!"></paper-toast> 71 </template> 72 </demo-snippet> 73 74 <h3>Toast can fit into any element</h3> 75 <demo-snippet class="centered-demo"> 76 <template> 77 <style> 78 #container { 79 padding: 100px; 80 border: 1px solid gray; 81 } 82 </style> 83 <div id="container"> 84 <paper-button raised onclick="toast3.open()">Open toast</paper-button> 85 </div> 86 <paper-toast id="toast3" class="fit-bottom" text="This toast fits into the container."></paper-toast> 87 88 <script> 89 toast3.fitInto = container; 90 </script> 91 92 </template> 93 </demo-snippet> 94 </body> 95 96 </html> 97
