SGH / COMPONENTS

Blame view

bower_components/paper-dialog/demo/index.html 12.1 KB
Edit Raw Normal View History
73bcce88   luigser   COMPONENTS 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
  <!doctype html>
  <!--
  @license
  Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  Code distributed by Google as part of the polymer project is also
  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  -->
  <html>
  <head>
  
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
  
    <title>paper-dialog demo</title>
  
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  
    <link rel="import" href="../paper-dialog.html">
    <link rel="import" href="../../paper-button/paper-button.html">
    <link rel="import" href="../../paper-dialog-scrollable/paper-dialog-scrollable.html">
    <link rel="import" href="../../paper-styles/paper-styles.html">
    <link rel="import" href="../../paper-styles/demo-pages.html">
    <link rel="import" href="../../neon-animation/neon-animations.html">
e619a3b0   Luigi Serra   Controllet cross ... 
28
29
30
 
    <link rel="import" href="../../paper-dropdown-menu/paper-dropdown-menu.html">
    <link rel="import" href="../../paper-menu/paper-menu.html">
    <link rel="import" href="../../paper-item/paper-item.html">
73bcce88   luigser   COMPONENTS 
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
  
    <link rel="stylesheet" href="../../paper-styles/demo.css">
  
    <style is="custom-style">
      section > paper-button {
        background-color: var(--google-grey-300);
        padding: 5px;
      }
  
      section > paper-button:hover {
        background-color: var(--paper-light-blue-200);
        padding: 5px;
      }
  
      paper-dialog.colored {
        border: 2px solid;
        border-color: var(--paper-green-500);
        background-color: var(--paper-light-green-50);
        color: var(--paper-green-500);
      }
  
      paper-dialog.size-position {
        position: fixed;
        top: 16px;
        right: 16px;
73bcce88   luigser   COMPONENTS 
56
57
 
        width: 300px;
        height: 300px;
e619a3b0   Luigi Serra   Controllet cross ... 
58
 
        overflow: auto;
73bcce88   luigser   COMPONENTS 
59
60
61
62
63
64
65
66
67
68
69
70
71
 
      }
    </style>
  
  </head>
  <body unresolved>
  
    <section onclick="clickHandler(event)">
      <h4>Dialog layouts</h4>
  
      <paper-button data-dialog="dialog">plain dialog</paper-button>
      <paper-button data-dialog="scrolling">scrolling dialog</paper-button>
      <paper-button data-dialog="actions">dialog with actions</paper-button>
      <paper-button data-dialog="modal">modal dialog</paper-button>
e619a3b0   Luigi Serra   Controllet cross ... 
72
73
 
      <paper-button data-dialog="dropdown">dialog with dropdown</paper-button>
      <paper-button data-dialog="nested">dialog with nested dialog</paper-button>
73bcce88   luigser   COMPONENTS 
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
  
      <paper-dialog id="dialog">
        <h2>Dialog Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </paper-dialog>
  
      <paper-dialog id="scrolling">
        <h2>Scrolling</h2>
        <paper-dialog-scrollable>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </paper-dialog-scrollable>
        <div class="buttons">
          <paper-button dialog-dismiss>Cancel</paper-button>
          <paper-button dialog-confirm autofocus>OK</paper-button>
        </div>
      </paper-dialog>
  
      <paper-dialog id="actions">
        <h2>Dialog Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <div class="buttons">
          <paper-button >More Info...</paper-button>
          <paper-button dialog-dismiss>Decline</paper-button>
          <paper-button dialog-confirm autofocus>Accept</paper-button>
        </div>
      </paper-dialog>
  
      <paper-dialog id="modal" modal>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <div class="buttons">
          <paper-button dialog-confirm autofocus>Tap me to close</paper-button>
        </div>
      </paper-dialog>
e619a3b0   Luigi Serra   Controllet cross ... 
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
 
      <paper-dialog id="dropdown">
      <h2>Dialog Title</h2>
      <paper-dropdown-menu label="Value">
        <paper-menu class="dropdown-content">
          <paper-item>1</paper-item>
          <paper-item>2</paper-item>
          <paper-item>3</paper-item>
          <paper-item>4</paper-item>
          <paper-item>5</paper-item>
          <paper-item>6</paper-item>
          <paper-item>7</paper-item>
          <paper-item>8</paper-item>
          <paper-item>9</paper-item>
          <paper-item>10</paper-item>
        </paper-menu>
      </paper-dropdown-menu>
    </paper-dialog>
  
    <paper-dialog id="nested">
      <h2>Dialog Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <div class="buttons">
        <paper-button data-dialog="innerDialog">Open nested dialog</paper-button>
      </div>
    </paper-dialog>
  
    <paper-dialog id="innerDialog">
      <h2>Dialog Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </paper-dialog>
73bcce88   luigser   COMPONENTS 
146
147
148
149
150
151
152
 
    </section>
  
    <section onclick="clickHandler(event)">
      <h4>Custom styling</h4>
      <paper-button data-dialog="colors">colors</paper-button>
      <paper-button data-dialog="position">size &amp; position</paper-button>
e619a3b0   Luigi Serra   Controllet cross ... 
153
154
 
      <paper-dialog id="colors" class="colored">
        <h2>Custom Colors</h2>
73bcce88   luigser   COMPONENTS 
155
156
157
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </paper-dialog>
e619a3b0   Luigi Serra   Controllet cross ... 
158
159
 
      <paper-dialog id="position" class="size-position">
        <h2>Custom Size &amp; Position</h2>
73bcce88   luigser   COMPONENTS 
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </paper-dialog>
    </section>
  
    <section onclick="clickHandler(event)">
      <h4>Transitions</h4>
      <paper-button data-dialog="animated">transitions</paper-button>
      <paper-dialog id="animated" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
        <h2>Dialog Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </paper-dialog>
    </section>
  
    <script>
      function clickHandler(e) {
        var button = e.target;
        while (!button.hasAttribute('data-dialog') && button !== document.body) {
          button = button.parentElement;
        }
  
        if (!button.hasAttribute('data-dialog')) {
          return;
        }
  
        var id = button.getAttribute('data-dialog');
        var dialog = document.getElementById(id);
        if (dialog) {
          dialog.open();
        }
      }
  
    </script>
  
  </body>
  </html>