• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2    @license
3    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7    Code distributed by Google as part of the polymer project is also
8    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10<!doctype html>
11<html>
12<head>
13  <title>paper-toast</title>
14
15  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
16  <meta name="mobile-web-app-capable" content="yes">
17  <meta name="apple-mobile-web-app-capable" content="yes">
18
19  <script src="../webcomponentsjs/webcomponents.js"></script>
20
21  <link rel="import" href="paper-toast.html">
22  <link rel="import" href="../font-roboto/roboto.html" >
23  <link rel="import" href="../paper-button/paper-button.html" >
24
25  <style>
26
27    html, body {
28      height: 100%;
29    }
30
31    body {
32      overflow: hidden;
33      margin: 0;
34      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
35      -webkit-tap-highlight-color: rgba(0,0,0,0);
36      -webkit-touch-callout: none;
37    }
38
39    paper-button {
40      margin: 20px;
41    }
42
43  </style>
44
45</head>
46<body unresolved>
47
48  <paper-button raised onclick="document.querySelector('#toast1').show()">Discard Draft</paper-button>
49
50  <paper-button raised onclick="document.querySelector('#toast2').show()">Get Messages</paper-button>
51
52  <paper-button raised onclick="document.querySelector('#toast3').show()">Send Message</paper-button>
53
54  <paper-toast id="toast1" text="Your draft has been discarded."></paper-toast>
55
56  <paper-toast id="toast2" role="alert" text="Connection timed out. Showing limited messages.">
57    <div style="color: #eeff41;" onclick="console.log('RETRY')">Retry</div>
58  </paper-toast>
59
60  <paper-toast id="toast3" class="capsule" text="Message sent" style="padding-right: 60px;"></paper-toast>
61
62</body>
63</html>
64