1 <!-- 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 6 Code distributed by Google as part of the polymer project is also 7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 8 --> 9 10 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../core-transition/core-transition.html"> 12 <link rel="import" href="core-key-helper.html"> 13 <link rel="import" href="core-overlay-layer.html"> 14 15 <!-- 16 The `core-overlay` element displays overlayed on top of other content. It starts 17 out hidden and is displayed by setting its `opened` property to true. 18 A `core-overlay's` opened state can be toggled by calling the `toggle` 19 method. 20 21 The `core-overlay` will, by default, show/hide itself when it's opened. The 22 `target` property may be set to another element to cause that element to 23 be shown when the overlay is opened. 24 25 It's common to want a `core-overlay` to animate to its opened 26 position. The `core-overlay` element uses a `core-transition` to handle 27 animation. The default transition is `core-transition-fade` which 28 causes the overlay to fade in when displayed. See 29 <a href="../core-transition/">`core-transition`</a> for more 30 information about customizing a `core-overlay's` opening animation. The 31 `backdrop` property can be set to true to show a backdrop behind the overlay 32 that will darken the rest of the window. 33 34 An element that should close the `core-overlay` will automatically 35 do so if it's given the `core-overlay-toggle` attribute. This attribute 36 can be customized with the `closeAttribute` property. You can also use 37 `closeSelector` if more general matching is needed. 38 39 By default `core-overlay` will close whenever the user taps outside it or 40 presses the escape key. This behavior can be turned off via the 41 `autoCloseDisabled` property. 42 43 <core-overlay> 44 <h2>Dialog</h2> 45 <input placeholder="say something..." autofocus> 46 <div>I agree with this wholeheartedly.</div> 47 <button core-overlay-toggle>OK</button> 48 </core-overlay> 49 50 `core-overlay` will automatically size and position itself according to the 51 following rules. If the target's style.top and style.left are unset, the 52 target will be centered. The size of the target is constrained to be no larger 53 than the window dimensions. The `margin` property specifies the extra amount 54 of space that should be reserved around the overlay. This can be used to ensure 55 that, for example, a drop shadow is always visible around the overlay. 56 57 @group Core Elements 58 @element core-overlay 59 @homepage github.io 60 --> 61 <!-- 62 Fired when the `core-overlay`'s `opened` property changes. 63 64 @event core-overlay-open 65 @param {Object} detail 66 @param {Object} detail.opened the opened state 67 --> 68 69 <style> 70 .core-overlay-backdrop { 71 position: fixed; 72 top: 0; 73 left: 0; 74 width: 100vw; 75 height: 100vh; 76 background-color: black; 77 opacity: 0; 78 transition: opacity 0.2s; 79 } 80 81 .core-overlay-backdrop.core-opened { 82 opacity: 0.6; 83 } 84 </style> 85 86 <polymer-element name="core-overlay" assetpath=""> 87 88 </polymer-element> 89 <script src="core-overlay-extracted.js"></script>
