← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/iron-pages/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/iron-pages/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
 
 
12
<html>
 
13
<head>
 
14
 
 
15
  <title>iron-pages demo</title>
 
16
 
 
17
  <meta charset="utf-8">
 
18
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
19
  <meta name="mobile-web-app-capable" content="yes">
 
20
  <meta name="apple-mobile-web-app-capable" content="yes">
 
21
 
 
22
  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
23
  <link rel="import" href="../../paper-styles/color.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
  <link rel="import" href="../iron-pages.html">
 
27
 
 
28
  <style is="custom-style" include="demo-pages-shared-styles"></style>
 
29
</head>
 
30
<body unresolved>
 
31
  <div class="vertical-section-container centered">
 
32
    <h3>iron-pages shows only one of its children at a time.</h3>
 
33
    <demo-snippet>
 
34
      <template>
 
35
        <style is="custom-style">
 
36
          iron-pages {
 
37
            width: 100%;
 
38
            height: 200px;
 
39
            font-size: 50px;
 
40
            color: white;
 
41
            text-align: center;
 
42
          }
 
43
          iron-pages div {
 
44
            width: 100%;
 
45
            height: 100%;
 
46
            padding: 80px 0;
 
47
          }
 
48
          iron-pages div:nth-child(1) {
 
49
            background-color: var(--google-blue-500);
 
50
          }
 
51
          iron-pages div:nth-child(2) {
 
52
            background-color: var(--google-red-500);
 
53
          }
 
54
          iron-pages div:nth-child(3) {
 
55
            background-color: var(--google-green-500);
 
56
          }
 
57
        </style>
 
58
        <p>Click on a page to advance to the next one.</p>
 
59
        <iron-pages selected="0">
 
60
          <div>One</div>
 
61
          <div>Two</div>
 
62
          <div>Three</div>
 
63
        </iron-pages>
 
64
        <script>
 
65
          document.addEventListener('click', function(e) {
 
66
            var pages = document.querySelector('iron-pages');
 
67
            pages.selectNext();
 
68
          });
 
69
        </script>
 
70
      </template>
 
71
    </demo-snippet>
 
72
  </div>
 
73
</body>
 
74
</html>