← 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-menu-button/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-menu-button/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
  <meta charset="utf-8">
 
16
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
17
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
18
 
 
19
  <title>paper-menu-button</title>
 
20
 
 
21
  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
22
 
 
23
  <link rel="import" href="../../iron-icons/iron-icons.html">
 
24
  <link rel="import" href="../../iron-icon/iron-icon.html">
 
25
  <link rel="import" href="../../iron-image/iron-image.html">
 
26
  <link rel="import" href="../../paper-menu/paper-menu.html">
 
27
  <link rel="import" href="../../paper-item/paper-item.html">
 
28
  <link rel="import" href="../../paper-button/paper-button.html">
 
29
  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
 
30
  <link rel="import" href="../../paper-styles/demo-pages.html">
 
31
 
 
32
  <link rel="import" href="../paper-menu-button.html">
 
33
 
 
34
  <style is="custom-style">
 
35
    paper-button {
 
36
      display: block;
 
37
      background: #4285f4;
 
38
      color: #fff;
 
39
    }
 
40
 
 
41
    paper-menu {
 
42
      display: block;
 
43
    }
 
44
 
 
45
    paper-menu-button {
 
46
      margin: auto;
 
47
    }
 
48
 
 
49
    iron-image {
 
50
      padding: 1em;
 
51
    }
 
52
 
 
53
    .item {
 
54
      max-width: 300px;
 
55
    }
 
56
 
 
57
    .horizontal-section {
 
58
      text-align: center;
 
59
    }
 
60
  </style>
 
61
 
 
62
</head>
 
63
<body unresolved>
 
64
 
 
65
 
 
66
  <template id="Demo" is="dom-bind">
 
67
 
 
68
    <div class="horizontal-section-container">
 
69
      <div>
 
70
        <h4>Paper Icon Button + Paper Menu</h4>
 
71
        <div class="horizontal-section">
 
72
          <paper-menu-button>
 
73
            <paper-icon-button icon="menu" class="dropdown-trigger" alt="menu"></paper-icon-button>
 
74
            <paper-menu class="dropdown-content">
 
75
              <template is="dom-repeat" items="[[letters]]" as="letter">
 
76
                <paper-item>[[letter]]</paper-item>
 
77
              </template>
 
78
            </paper-menu>
 
79
          </paper-menu-button>
 
80
        </div>
 
81
      </div>
 
82
    </div>
 
83
 
 
84
    <div class="horizontal-section-container">
 
85
      <div>
 
86
        <h4>Paper Menu with multi selection</h4>
 
87
        <div class="horizontal-section">
 
88
          <paper-menu-button ignore-select>
 
89
            <paper-icon-button icon="menu" class="dropdown-trigger" alt="multi select"></paper-icon-button>
 
90
            <paper-menu class="dropdown-content" multi>
 
91
              <template is="dom-repeat" items="[[letters]]" as="letter">
 
92
                <paper-item>[[letter]]</paper-item>
 
93
              </template>
 
94
            </paper-menu>
 
95
          </paper-menu-button>
 
96
        </div>
 
97
      </div>
 
98
    </div>
 
99
 
 
100
    <div class="horizontal-section-container">
 
101
      <div>
 
102
        <h4>Disabled</h4>
 
103
        <div class="horizontal-section">
 
104
          <paper-menu-button disabled>
 
105
            <paper-icon-button icon="menu" class="dropdown-trigger" alt="menu"></paper-icon-button>
 
106
            <paper-menu class="dropdown-content">
 
107
              <template is="dom-repeat" items="[[letters]]" as="letter">
 
108
                <paper-item>[[letter]]</paper-item>
 
109
              </template>
 
110
            </paper-menu>
 
111
          </paper-menu-button>
 
112
        </div>
 
113
      </div>
 
114
    </div>
 
115
 
 
116
    <div class="horizontal-section-container">
 
117
      <div>
 
118
        <h4>Alternate Alignment</h4>
 
119
        <div class="horizontal-section">
 
120
          <paper-menu-button vertical-align="bottom" horizontal-align="right">
 
121
            <paper-icon-button icon="menu" class="dropdown-trigger" alt="bottom align"></paper-icon-button>
 
122
            <paper-menu class="dropdown-content">
 
123
              <template is="dom-repeat" items="[[letters]]" as="letter">
 
124
                <paper-item>[[letter]]</paper-item>
 
125
              </template>
 
126
            </paper-menu>
 
127
          </paper-menu-button>
 
128
        </div>
 
129
      </div>
 
130
    </div>
 
131
 
 
132
    <div class="horizontal-section-container">
 
133
      <div>
 
134
        <h4>Alternate Button</h4>
 
135
        <div class="horizontal-section">
 
136
          <paper-menu-button>
 
137
            <paper-button class="dropdown-trigger" raised>
 
138
              <iron-icon icon="check"></iron-icon>
 
139
              <span>Dinosaurs</span>
 
140
            </paper-button>
 
141
            <paper-menu class="dropdown-content">
 
142
              <template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
 
143
                <paper-item>[[dinosaur]]</paper-item>
 
144
              </template>
 
145
            </paper-menu>
 
146
          </paper-menu-button>
 
147
        </div>
 
148
      </div>
 
149
    </div>
 
150
 
 
151
    <div class="horizontal-section-container">
 
152
      <div>
 
153
        <h4>Alternate Content</h4>
 
154
        <div class="horizontal-section">
 
155
          <paper-menu-button vertical-align="bottom">
 
156
            <paper-icon-button class="dropdown-trigger" icon="polymer" alt="polymer"></paper-icon-button>
 
157
            <iron-image class="dropdown-content" src="../../iron-image/demo/polymer.svg"></iron-image>
 
158
          </paper-menu-button>
 
159
        </div>
 
160
      </div>
 
161
    </div>
 
162
  </template>
 
163
 
 
164
  <script>
 
165
    Demo.letters = [
 
166
      'alpha',
 
167
      'beta',
 
168
      'gamma',
 
169
      'delta',
 
170
      'epsilon'
 
171
    ];
 
172
    Demo.dinosaurs = [
 
173
      'allosaurus',
 
174
      'brontosaurus',
 
175
      'carcharodontosaurus',
 
176
      'diplodocus',
 
177
      'ekrixinatosaurus',
 
178
      'fukuiraptor',
 
179
      'gallimimus',
 
180
      'hadrosaurus',
 
181
      'iguanodon',
 
182
      'jainosaurus',
 
183
      'kritosaurus',
 
184
      'liaoceratops',
 
185
      'megalosaurus',
 
186
      'nemegtosaurus',
 
187
      'ornithomimus',
 
188
      'protoceratops',
 
189
      'quetecsaurus',
 
190
      'rajasaurus',
 
191
      'stegosaurus',
 
192
      'triceratops',
 
193
      'utahraptor',
 
194
      'vulcanodon',
 
195
      'wannanosaurus',
 
196
      'xenoceratops',
 
197
      'yandusaurus',
 
198
      'zephyrosaurus'
 
199
    ];
 
200
  </script>
 
201
 
 
202
</body>
 
203
</html>