third_party/polymer/components-chromium/core-overlay/core-overlay.html

   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 --><html><head><link rel="import" href="../polymer/polymer.html">
   9 <link rel="import" href="../core-transition/core-transition.html">
  10 <link rel="import" href="../core-resizable/core-resizable.html">
  11 <link rel="import" href="core-key-helper.html">
  12 <link rel="import" href="core-overlay-layer.html">
  13
  14 <!--
  15 The `core-overlay` element displays overlayed on top of other content. It starts
  16 out hidden and is displayed by setting its `opened` property to true.
  17 A `core-overlay's` opened state can be toggled by calling the `toggle`
  18 method.
  19
  20 The `core-overlay` will, by default, show/hide itself when it's opened. The
  21 `target` property may be set to another element to cause that element to
  22 be shown when the overlay is opened.
  23
  24 It's common to want a `core-overlay` to animate to its opened
  25 position. The `core-overlay` element uses a `core-transition` to handle
  26 animation. The default transition is `core-transition-fade` which
  27 causes the overlay to fade in when displayed. See
  28 <a href="../core-transition/">`core-transition`</a> for more
  29 information about customizing a `core-overlay's` opening animation. The
  30 `backdrop` property can be set to true to show a backdrop behind the overlay
  31 that will darken the rest of the window.
  32
  33 An element that should close the `core-overlay` will automatically
  34 do so if it's given the `core-overlay-toggle` attribute. This attribute
  35 can be customized with the `closeAttribute` property. You can also use
  36 `closeSelector` if more general matching is needed.
  37
  38 By default  `core-overlay` will close whenever the user taps outside it or
  39 presses the escape key. This behavior can be turned off via the
  40 `autoCloseDisabled` property.
  41
  42     <core-overlay>
  43       <h2>Dialog</h2>
  44       <input placeholder="say something..." autofocus>
  45       <div>I agree with this wholeheartedly.</div>
  46       <button core-overlay-toggle>OK</button>
  47     </core-overlay>
  48
  49 `core-overlay` will automatically size and position itself according to the
  50 following rules. The overlay's size is constrained such that it does not
  51 overflow the screen. This is done by setting maxHeight/maxWidth on the
  52 `sizingTarget`. If the `sizingTarget` already has a setting for one of these
  53 properties, it will not be overridden. The overlay should
  54 be positioned via css or imperatively using the `core-overlay-position` event.
  55 If the overlay is not positioned vertically via setting `top` or `bottom`, it
  56 will be centered vertically. The same is true horizontally via a setting to
  57 `left` or `right`. In addition, css `margin` can be used to provide some space
  58 around the overlay. This can be used to ensure
  59 that, for example, a drop shadow is always visible around the overlay.
  60
  61 @group Core Elements
  62 @element core-overlay
  63 @homepage github.io
  64 -->
  65 <!--
  66 Fired when the `core-overlay`'s `opened` property changes.
  67
  68 @event core-overlay-open
  69 @param {Object} detail
  70 @param {Object} detail.opened the opened state
  71 -->
  72 <!--
  73 Fired when the `core-overlay` has completely opened.
  74
  75 @event core-overlay-open-completed
  76 -->
  77 <!--
  78 Fired when the `core-overlay` has completely closed.
  79
  80 @event core-overlay-close-completed
  81 -->
  82 <!--
  83 Fired when the `core-overlay` needs to position itself. Optionally, implement
  84 in order to position an overlay via code. If the overlay was not otherwise
  85 positioned, it's important to indicate how the overlay has been positioned by
  86 setting the `dimensions.position` object. For example, if the overlay has been
  87 positioned via setting `right` and `top`, set dimensions.position to an
  88 object like this: `{v: 'top', h: 'right'}`.
  89
  90 @event core-overlay-position
  91 @param {Object} detail
  92 @param {Object} detail.target the overlay target
  93 @param {Object} detail.sizingTarget the overlay sizing target
  94 @param {Object} detail.opened the opened state
  95 -->
  96 <style>
  97   .core-overlay-backdrop {
  98     position: fixed;
  99     top: 0;
 100     left: 0;
 101     width: 100vw;
 102     height: 100vh;
 103     background-color: black;
 104     opacity: 0;
 105     transition: opacity 0.2s;
 106   }
 107
 108   .core-overlay-backdrop.core-opened {
 109     opacity: 0.6;
 110   }
 111 </style>
 112
 113 </head><body><polymer-element name="core-overlay" assetpath="">
 114
 115 </polymer-element>
 116 <script src="core-overlay-extracted.js"></script></body></html>