1 <!-- 2 @license 3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7 Code distributed by Google as part of the polymer project is also 8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9 --> 10 <!doctype html> 11 <html> 12 <head> 13 14 <meta charset="utf-8"> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 16 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 17 18 <title>paper-dialog</title> 19 20 <script src="../webcomponentsjs/webcomponents.js"></script> 21 22 <link href="../font-roboto/roboto.html" rel="import"> 23 <link href="../paper-button/paper-button.html" rel="import"> 24 25 <link href="paper-dialog.html" rel="import"> 26 <link href="paper-action-dialog.html" rel="import"> 27 28 <style shim-shadowdom> 29 body { 30 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; 31 font-size: 14px; 32 margin: 0; 33 padding: 24px; 34 -webkit-tap-highlight-color: rgba(0,0,0,0); 35 -webkit-touch-callout: none; 36 } 37 38 section { 39 padding: 20px 0; 40 } 41 42 section > div { 43 padding: 14px; 44 font-size: 16px; 45 } 46 47 button { 48 margin: 8px 4px; 49 } 50 51 html /deep/ [autofocus] { 52 color: #03a9f4; 53 } 54 55 html /deep/ .scrolling::shadow #scroller { 56 height: 350px; 57 } 58 59 html /deep/ .colored { 60 border: 1px solid #0f9d58; 61 background-color: #b7e1cd; 62 color: #0f9d58; 63 } 64 65 html /deep/ .size-position { 66 position: fixed; 67 top: 16px; 68 right: 16px; 69 } 70 71 html /deep/ .size-position::shadow #scroller { 72 width: 300px; 73 height: 300px; 74 } 75 76 </style> 77 78 <!-- 79 <style> 80 body { 81 -webkit-transform: translateZ(0); 82 transform: translateZ(0); 83 font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; 84 font-size: 16px; 85 color: rgba(0, 0, 0, 0.87); 86 } 87 88 paper-dialog { 89 width: 50%; 90 min-width: 430px; 91 } 92 93 p { 94 margin-bottom: 0; 95 } 96 97 paper-dialog paper-button { 98 font-weight: bold; 99 } 100 101 paper-button[autofocus] { 102 color: #4285f4; 103 } 104 </style> 105 --> 106 </head> 107 <body unresolved> 108 109 <template is="auto-binding"> 110 111 <section on-tap="{{toggleDialog1}}"> 112 113 <div>Dialog Layouts</div> 114 115 <button> 116 Plain dialog 117 </button> 118 119 <paper-dialog> 120 <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> 121 </paper-dialog> 122 123 <button> 124 Dialog with heading 125 </button> 126 127 <paper-dialog heading="Title"> 128 <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> 129 </paper-dialog> 130 131 <button> 132 Dialog with actions 133 </button> 134 135 <paper-action-dialog heading="Title"> 136 <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> 137 138 <paper-button dismissive>More Info...</paper-button> 139 <paper-button affirmative>Decline</paper-button> 140 <paper-button affirmative autofocus>Accept</paper-button> 141 </paper-action-dialog> 142 143 <button> 144 Modal dialog with backdrop and actions 145 </button> 146 147 <paper-action-dialog backdrop autoCloseDisabled layered="false"> 148 <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> 149 150 <paper-button affirmative autofocus>Tap me to close</paper-button> 151 </paper-action-dialog> 152 153 </section> 154 155 <section on-tap="{{toggleDialog1}}"> 156 157 <div>Scrolling</div> 158 159 <button> 160 Dialog with heading 161 </button> 162 163 <paper-dialog heading="Title" class="scrolling"> 164 <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> 165 <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> 166 <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> 167 <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> 168 <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> 169 <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> 170 <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> 171 <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> 172 <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> 173 <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> 174 </paper-dialog> 175 176 <button> 177 Dialog with actions 178 </button> 179 180 <paper-action-dialog heading="Title" class="scrolling"> 181 182 <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> 183 <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> 184 <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> 185 <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> 186 <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> 187 <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> 188 <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> 189 <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> 190 <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> 191 <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> 192 193 <paper-button dismissive>More Info...</paper-button> 194 <paper-button affirmative>Decline</paper-button> 195 <paper-button affirmative autofocus>Accept</paper-button> 196 197 </paper-action-dialog> 198 199 </section> 200 201 <section on-tap="{{toggleDialog2}}"> 202 203 <div>Transitions</div> 204 205 <template repeat="{{transitions}}"> 206 <button transition="{{}}">{{}}</button> 207 </template> 208 209 <paper-dialog id="dialog2" transition="{{transition}}"> 210 211 <h1>{{transition || 'No Transition'}}</h1> 212 213 <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> 214 215 </paper-dialog> 216 217 </section> 218 219 <section on-tap="{{toggleDialog1}}"> 220 221 <div>Custom Styling</div> 222 223 <button> 224 Colors 225 </button> 226 227 <paper-dialog heading="Custom Colors" class="colored"> 228 <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> 229 </paper-dialog> 230 231 <button> 232 Size & Position 233 </button> 234 235 <paper-dialog heading="Custom Size & Position" class="size-position"> 236 <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> 237 </paper-dialog> 238 239 </section> 240 241 </template> 242 243 <script> 244 245 246 var scope = document.querySelector('template[is=auto-binding]'); 247 248 scope.toggleDialog1 = function(e) { 249 if (e.target.localName != 'button') { 250 return; 251 } 252 var d = e.target.nextElementSibling; 253 if (!d) { 254 return; 255 } 256 d.toggle(); 257 }; 258 259 scope.transitions = [ 260 'core-transition-center', 261 'core-transition-top', 262 'core-transition-bottom', 263 'core-transition-left', 264 'core-transition-right' 265 ]; 266 267 scope.toggleDialog2 = function(e) { 268 if (e.target.localName != 'button') { 269 return; 270 } 271 scope.transition = e.target.getAttribute('transition'); 272 document.getElementById('dialog2').toggle(); 273 }; 274 275 </script> 276 277 </body> 278 </html> 279
