diff options
Diffstat (limited to 'chromium/third_party/catapult/third_party/polymer2/bower_components/iron-overlay-behavior/demo/index.html')
| -rw-r--r-- | chromium/third_party/catapult/third_party/polymer2/bower_components/iron-overlay-behavior/demo/index.html | 325 |
1 files changed, 325 insertions, 0 deletions
diff --git a/chromium/third_party/catapult/third_party/polymer2/bower_components/iron-overlay-behavior/demo/index.html b/chromium/third_party/catapult/third_party/polymer2/bower_components/iron-overlay-behavior/demo/index.html new file mode 100644 index 00000000000..61be62d0f62 --- /dev/null +++ b/chromium/third_party/catapult/third_party/polymer2/bower_components/iron-overlay-behavior/demo/index.html @@ -0,0 +1,325 @@ +<!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> + + <title>simple-overlay demo</title> + + <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"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + + <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html"> + <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> + <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> + <link rel="import" href="simple-overlay.html"> + + <custom-style> + <style is="custom-style" include="demo-pages-shared-styles"> + demo-snippet { + --demo-snippet-code: { + max-height: 250px; + } + } + </style> + </custom-style> + +</head> + +<body unresolved class="centered"> + + <h3>An element with <code>IronOverlayBehavior</code> can be opened, closed, toggled.</h3> + <demo-snippet> + <template> + <button onclick="plain.open()">Plain overlay</button> + <simple-overlay id="plain" tabindex=-1> + <h2>Hello world!</h2> + <p>This can be closed by pressing the ESC key too.</p> + <button onclick="plain.close()">Close</button> + </simple-overlay> + </template> + </demo-snippet> + + <h3>Use <code>with-backdrop</code> to add a backdrop to your overlay. Tabbing will be trapped within the overlay.</h3> + <demo-snippet> + <template> + <button onclick="backdrop.open()">Overlay with backdrop</button> + <simple-overlay id="backdrop" with-backdrop scroll-action="lock"> + <p>Hello world!</p> + <button>Button</button> + <button onclick="backdrop.close()">Close</button> + </simple-overlay> + </template> + </demo-snippet> + + <h3>Use <code>restore-focus-on-close</code> to return the focus to the element that opened the overlay when it gets closed.</h3> + <demo-snippet> + <template> + <button onclick="returnFocus.open()">Overlay that restores focus</button> + <simple-overlay id="returnFocus" restore-focus-on-close> + <p>Hello world!</p> + <button onclick="returnFocus.close()">Close</button> + </simple-overlay> + </template> + </demo-snippet> + + <h3>The child with <code>autofocus</code> gets focused when opening the overlay.</h3> + <demo-snippet> + <template> + <button onclick="withAutofocus.open()">Overlay with autofocus child</button> + <simple-overlay id="withAutofocus"> + <p>Hello world!</p> + <button autofocus>autofocus</button> + <button onclick="withAutofocus.close()">Close</button> + </simple-overlay> + </template> + </demo-snippet> + + <h3>Multiple overlays can be opened.</h3> + <demo-snippet> + <template> + <button onclick="multiple.open()">Open first overlay</button> + <simple-overlay id="multiple" tabindex=-1 with-backdrop> + <p>click to open another overlay</p> + <button onclick="multiple2.open()">Open second overlay</button> + <button onclick="multiple.close()">Close this</button> + </simple-overlay> + <simple-overlay id="multiple2" tabindex=-1 with-backdrop> + <button onclick="multiple3.open()">Open third overlay</button> + <button onclick="multiple2.close()">Close</button> + </simple-overlay> + <simple-overlay id="multiple3" tabindex=-1> + <h2>Hello!</h2> + <button onclick="multiple3.close()">Close</button> + </simple-overlay> + </template> + </demo-snippet> + + <h3>Use <code>always-on-top</code> to keep the overlay on top of others.</h3> + <demo-snippet> + <template> + <button onclick="onTop.open()">Open always-on-top</button> + <simple-overlay id="onTop" always-on-top tabindex=-1> + <h2>Always on top</h2> + <button onclick="backdrop2.open()">Open with backdrop</button> + <button onclick="onTop.close()">Close this</button> + </simple-overlay> + <simple-overlay id="backdrop2" with-backdrop tabindex=-1> + <h2>With backdrop</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> + <button onclick="backdrop2.close()">Close</button> + </simple-overlay> + </template> + </demo-snippet> + + <h3>An element with <code>IronOverlayBehavior</code> can be scrollable or contain scrollable content.</h3> + <demo-snippet> + <template> + <custom-style> + <style is="custom-style"> + .with-margin { + margin: 24px 40px; + } + + .scrollable { + border: 1px solid lightgray; + padding: 24px; + @apply --layout-scroll; + } + </style> + </custom-style> + <button onclick="scrolling.open()">Scrolling overlay</button> + + <simple-overlay id="scrolling" class="with-margin scrollable" tabindex=-1 scroll-action="lock"> + <h2>This overlay scrolls internally.</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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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> + <button onclick="scrolling.close()">Close</button> + </simple-overlay> + + <button onclick="scrolling2.open()">Scrolling content</button> + + <simple-overlay id="scrolling2" class="with-margin" tabindex=-1 scroll-action="lock"> + <h2>This overlay has a scrolling child.</h2> + <p class="scrollable"> + 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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.<br> 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> + <button onclick="scrolling2.close()">Close</button> + </simple-overlay> + + <script> + // .scrollable is the element that determines the size of the overlay. + scrolling2.sizingTarget = scrolling2.querySelector('.scrollable'); + </script> + </template> + </demo-snippet> + + <h3>Use <code>allow-click-through</code> to allow click events to be handled by overlays below the top overlay.</h3> + <demo-snippet> + <template> + <button onclick="plain.open();toast.open()">Overlay that allows click through</button> + <simple-overlay id="toast" allow-click-through no-cancel-on-outside-click horizontal-align="left" vertical-align="bottom" no-auto-focus> + <span>This overlay allows click-through which can close overlays below it.</span> + <button onclick="toast.close()">Close</button> + </simple-overlay> + </template> + </demo-snippet> + + <h3>Use <code>scroll-action</code> to lock, refit or cancel an overlay on scroll.</h3> + <demo-snippet> + <template> + <span> + <button onclick="lockOnScroll.open()">locks scroll</button> + <simple-overlay id="lockOnScroll" scroll-action="lock" no-overlap + vertical-align="bottom" horizontal-align="left" tabindex=-1> + <h2>Prevents scroll outside</h2> + <button onclick="lockOnScroll.close()">Close this</button> + </simple-overlay> + </span> + <span> + <button onclick="refitOnScroll.open()">refits on scroll</button> + <simple-overlay id="refitOnScroll" scroll-action="refit" no-overlap + vertical-align="bottom" horizontal-align="left" tabindex=-1> + <h2>Refits on scroll</h2> + <button onclick="refitOnScroll.close()">Close this</button> + </simple-overlay> + </span> + <span> + <button onclick="cancelOnScroll.open()">cancels on scroll</button> + <simple-overlay id="cancelOnScroll" scroll-action="cancel" no-overlap + vertical-align="bottom" horizontal-align="left" tabindex=-1> + <h2>Cancels on scroll</h2> + <button onclick="cancelOnScroll.close()">Close this</button> + </simple-overlay> + </span> + </template> + </demo-snippet> + +</body> + +</html>
\ No newline at end of file |