← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/paper-toast/demo/index.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/paper-toast/demo/index.html
 
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>