← 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-image/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-image/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
  <head>
 
13
 
 
14
    <title>iron-image demo</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="../../iron-demo-helpers/demo-pages-shared-styles.html">
 
23
    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
 
24
    <link rel="import" href="../../polymer/polymer.html">
 
25
    <link rel="import" href="../iron-image.html">
 
26
 
 
27
    <style is="custom-style" include="demo-pages-shared-styles">
 
28
      .example {
 
29
        margin: 4px;
 
30
        flex: 1;
 
31
      }
 
32
 
 
33
      code {
 
34
        white-space: nowrap;
 
35
      }
 
36
    </style>
 
37
 
 
38
    <script>
 
39
      function load(id) {
 
40
        document.getElementById(id).src = "./polymer.svg?" + Math.random();
 
41
      }
 
42
    </script>
 
43
 
 
44
  </head>
 
45
  <body unresolved>
 
46
 
 
47
    <div class="vertical-section-container centered">
 
48
 
 
49
      <h3>A plain <code>iron-image</code>.</h3>
 
50
      <demo-snippet class="centered-demo">
 
51
        <template>
 
52
          <iron-image alt="The Polymer logo." src="./polymer.svg"></iron-image>
 
53
        </template>
 
54
      </demo-snippet>
 
55
 
 
56
      <h3>
 
57
        <code>sizing="cover"</code> expands the image to cover all of its
 
58
        specified size.
 
59
      </h3>
 
60
      <demo-snippet class="centered-demo">
 
61
        <template>
 
62
          <style is="custom-style">
 
63
            #example-sizing-cover {
 
64
              width: 150px;
 
65
              height: 150px;
 
66
              background: #ddd;
 
67
            }
 
68
          </style>
 
69
 
 
70
          <iron-image sizing="cover" id="example-sizing-cover" alt="The Polymer logo." src="./polymer.svg"></iron-image>
 
71
        </template>
 
72
      </demo-snippet>
 
73
 
 
74
      <h3>
 
75
        <code>sizing="contain"</code> expands the image to fit within its
 
76
        specified size.
 
77
      </h3>
 
78
      <demo-snippet class="centered-demo">
 
79
        <template>
 
80
          <style is="custom-style">
 
81
            #example-sizing-contain {
 
82
              width: 150px;
 
83
              height: 150px;
 
84
              background: #ddd;
 
85
            }
 
86
          </style>
 
87
 
 
88
          <iron-image sizing="contain" id="example-sizing-contain" alt="The Polymer logo." src="./polymer.svg"></iron-image>
 
89
        </template>
 
90
      </demo-snippet>
 
91
 
 
92
      <h3>
 
93
        Use the <code>--iron-image-width</code> property to set the width of
 
94
        the image wrapped by the <code>iron-image</code>.
 
95
      </h3>
 
96
      <demo-snippet class="centered-demo">
 
97
        <template>
 
98
          <style is="custom-style">
 
99
            #example-full-width-container {
 
100
              width: 200px;
 
101
              border: 2px solid #444;
 
102
              background: #444;
 
103
            }
 
104
 
 
105
            #example-full-width-container iron-image {
 
106
              background: #ddd;
 
107
            }
 
108
 
 
109
            #example-full-width {
 
110
              width: 100%;
 
111
              --iron-image-width: 100%;
 
112
            }
 
113
 
 
114
            #example-half-width {
 
115
              width: 50%;
 
116
              --iron-image-width: 100%;
 
117
            }
 
118
          </style>
 
119
 
 
120
 
 
121
          <div id="example-full-width-container">
 
122
            <iron-image id="example-full-width" alt="The Polymer logo." src="./polymer.svg"></iron-image>
 
123
            <iron-image id="example-half-width" alt="The Polymer logo." src="./polymer.svg"></iron-image>
 
124
          </div>
 
125
        </template>
 
126
      </demo-snippet>
 
127
 
 
128
      <h3>
 
129
        Use the <code>--iron-image-height</code> property to set the height of
 
130
        the image wrapped by the <code>iron-image</code>.
 
131
      </h3>
 
132
      <demo-snippet class="centered-demo">
 
133
        <template>
 
134
          <style is="custom-style">
 
135
            #example-full-height-container {
 
136
              height: 150px;
 
137
              border: 2px solid #444;
 
138
              background: #444;
 
139
            }
 
140
 
 
141
            #example-full-height-container iron-image{
 
142
              background: #ddd;
 
143
            }
 
144
 
 
145
            #example-full-height {
 
146
              height: 100%;
 
147
              --iron-image-height: 100%;
 
148
            }
 
149
 
 
150
            #example-half-height {
 
151
              height: 50%;
 
152
              --iron-image-height: 100%;
 
153
            }
 
154
          </style>
 
155
 
 
156
 
 
157
          <div id="example-full-height-container">
 
158
            <iron-image id="example-full-height" alt="The Polymer logo." src="./polymer.svg"></iron-image>
 
159
            <iron-image id="example-half-height" alt="The Polymer logo." src="./polymer.svg"></iron-image>
 
160
          </div>
 
161
        </template>
 
162
      </demo-snippet>
 
163
 
 
164
      <h3>
 
165
        No placeholder is shown by default.
 
166
      </h3>
 
167
      <demo-snippet class="centered-demo">
 
168
        <template>
 
169
          <style is="custom-style">
 
170
            .example.without-preload iron-image {
 
171
              width: 150px;
 
172
              height: 150px;
 
173
              background: #ddd;
 
174
            }
 
175
          </style>
 
176
 
 
177
          <div class="example without-preload">
 
178
            <button onclick="load('example-without-preload-1')">
 
179
              Load image
 
180
            </button>
 
181
            <br>
 
182
            <iron-image sizing="contain" alt="The Polymer logo." id="example-without-preload-1"></iron-image>
 
183
          </div>
 
184
        </template>
 
185
      </demo-snippet>
 
186
 
 
187
      <h3>
 
188
        The <code>preload</code> attribute shows a placeholder element in front
 
189
        of the image before it has loaded. Use the
 
190
        <code>--iron-image-placeholder</code> CSS mixin to style it.
 
191
      </h3>
 
192
      <demo-snippet class="centered-demo">
 
193
        <template>
 
194
          <style is="custom-style">
 
195
            .example.preload iron-image {
 
196
              width: 150px;
 
197
              height: 150px;
 
198
              background: #ddd;
 
199
              --iron-image-placeholder: {
 
200
                background: #939ed5;
 
201
              };
 
202
            }
 
203
          </style>
 
204
 
 
205
          <div class="example preload">
 
206
            <button onclick="load('example-preload-1')">
 
207
              Load image
 
208
            </button>
 
209
            <br>
 
210
            <iron-image preload id="example-preload-1" alt="The Polymer logo." class="sized" sizing="contain"></iron-image>
 
211
            <br>
 
212
            Without the <code>fade</code> attribute, the placeholder element is
 
213
            hidden with no transition when the image loads.
 
214
          </div>
 
215
          <div class="example preload">
 
216
            <button onclick="load('example-preload-2')">
 
217
              Load image
 
218
            </button>
 
219
            <br>
 
220
            <iron-image preload fade id="example-preload-2" alt="The Polymer logo." class="sized" sizing="contain"></iron-image>
 
221
            <br>
 
222
            With the <code>fade</code> attribute, the placeholder element is
 
223
            fades away when the image loads.
 
224
          </div>
 
225
        </template>
 
226
      </demo-snippet>
 
227
 
 
228
      <h3>
 
229
        Use the <code>placeholder</code> attribute to specify a background image
 
230
        for the placeholder element.
 
231
      </h3>
 
232
      <demo-snippet class="centered-demo">
 
233
        <template>
 
234
          <style is="custom-style">
 
235
            .example.preload-image iron-image {
 
236
              width: 150px;
 
237
              height: 150px;
 
238
              background: #ddd;
 
239
            }
 
240
          </style>
 
241
 
 
242
          <div class="example preload-image">
 
243
            <button onclick="load('example-preload-image-1')">
 
244
              Load image
 
245
            </button>
 
246
            <br>
 
247
            <iron-image preload placeholder="./loading.png" id="example-preload-image-1" alt="The Polymer logo." class="sized" sizing="contain"></iron-image>
 
248
            <br>
 
249
            (without <code>fade</code> attribute)
 
250
          </div>
 
251
          <div class="example preload-image">
 
252
            <button onclick="load('example-preload-image-2')">
 
253
              Load image
 
254
            </button>
 
255
            <br>
 
256
            <iron-image preload placeholder="./loading.png" fade id="example-preload-image-2" alt="The Polymer logo." class="sized" sizing="contain"></iron-image>
 
257
            <br>
 
258
            (with <code>fade</code> attribute)
 
259
          </div>
 
260
        </template>
 
261
      </demo-snippet>
 
262
 
 
263
    </div>
 
264
 
 
265
  </body>
 
266
</html>