Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(73)

Side by Side Diff: third_party/polymer/components-chromium/core-overlay/core-overlay.html

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
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.g ithub.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/CONTRI BUTORS.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/PATEN TS.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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698