| OLD | NEW |
| (Empty) |
| 1 | |
| 2 <!--- | |
| 3 | |
| 4 This README is automatically generated from the comments in these files: | |
| 5 iron-overlay-backdrop.html iron-overlay-behavior.html | |
| 6 | |
| 7 Edit those files, and our readme bot will duplicate them over here! | |
| 8 Edit this file, and the bot will squash your changes :) | |
| 9 | |
| 10 The bot does some handling of markdown. Please file a bug if it does the wrong | |
| 11 thing! https://github.com/PolymerLabs/tedium/issues | |
| 12 | |
| 13 --> | |
| 14 | |
| 15 [](https://travis-ci.org/PolymerElements/iron-overlay-behavior) | |
| 16 | |
| 17 _[Demo and API docs](https://elements.polymer-project.org/elements/iron-overlay-
behavior)_ | |
| 18 | |
| 19 | |
| 20 ##<iron-overlay-backdrop> | |
| 21 | |
| 22 `iron-overlay-backdrop` is a backdrop used by `Polymer.IronOverlayBehavior`. It
should be a | |
| 23 singleton. | |
| 24 | |
| 25 ### Styling | |
| 26 | |
| 27 The following custom properties and mixins are available for styling. | |
| 28 | |
| 29 | Custom property | Description | Default | | |
| 30 | --- | --- | --- | | |
| 31 | `--iron-overlay-backdrop-background-color` | Backdrop background color | #000
| | |
| 32 | `--iron-overlay-backdrop-opacity` | Backdrop opacity | 0.6 | | |
| 33 | `--iron-overlay-backdrop` | Mixin applied to `iron-overlay-backdrop`. | {} | | |
| 34 | `--iron-overlay-backdrop-opened` | Mixin applied to `iron-overlay-backdrop` wh
en it is displayed | {} | | |
| 35 | |
| 36 | |
| 37 | |
| 38 ##Polymer.IronOverlayBehavior | |
| 39 | |
| 40 Use `Polymer.IronOverlayBehavior` to implement an element that can be hidden or
shown, and displays | |
| 41 on top of other content. It includes an optional backdrop, and can be used to im
plement a variety | |
| 42 of UI controls including dialogs and drop downs. Multiple overlays may be displa
yed at once. | |
| 43 | |
| 44 ### Closing and canceling | |
| 45 | |
| 46 A dialog may be hidden by closing or canceling. The difference between close and
cancel is user | |
| 47 intent. Closing generally implies that the user acknowledged the content on the
overlay. By default, | |
| 48 it will cancel whenever the user taps outside it or presses the escape key. This
behavior is | |
| 49 configurable with the `no-cancel-on-esc-key` and the `no-cancel-on-outside-click
` properties. | |
| 50 `close()` should be called explicitly by the implementer when the user interacts
with a control | |
| 51 in the overlay element. When the dialog is canceled, the overlay fires an 'iron-
overlay-canceled' | |
| 52 event. Call `preventDefault` on this event to prevent the overlay from closing. | |
| 53 | |
| 54 ### Positioning | |
| 55 | |
| 56 By default the element is sized and positioned to fit and centered inside the wi
ndow. You can | |
| 57 position and size it manually using CSS. See `Polymer.IronFitBehavior`. | |
| 58 | |
| 59 ### Backdrop | |
| 60 | |
| 61 Set the `with-backdrop` attribute to display a backdrop behind the overlay. The
backdrop is | |
| 62 appended to `<body>` and is of type `<iron-overlay-backdrop>`. See its doc page
for styling | |
| 63 options. | |
| 64 | |
| 65 ### Limitations | |
| 66 | |
| 67 The element is styled to appear on top of other content by setting its `z-index`
property. You | |
| 68 must ensure no element has a stacking context with a higher `z-index` than its p
arent stacking | |
| 69 context. You should place this element as a child of `<body>` whenever possible. | |
| 70 | |
| 71 | |
| OLD | NEW |