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 [![Build status](https://travis-ci.org/PolymerElements/iron-overlay-behavior.svg
?branch=master)](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 |