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

Side by Side Diff: third_party/polymer/components/paper-dialog-behavior/paper-dialog-behavior.html

Issue 2113853002: Run bower update (Closed) Base URL: https://github.com/catapult-project/catapult@polymer10-migration
Patch Set: Created 4 years, 5 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
1 <!-- 1 <!--
2 @license 2 @license
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --> 9 -->
10 10
11 <link rel="import" href="../polymer/polymer.html"> 11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html"> 12 <link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html">
13 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
14 <link rel="import" href="../paper-styles/default-theme.html">
15 <link rel="import" href="../paper-styles/typography.html">
16 <link rel="import" href="../paper-styles/shadow.html">
17 13
18 <script> 14 <script>
19 15
20 /** 16 /**
21 Use `Polymer.PaperDialogBehavior` and `paper-dialog-shared-styles.html` to imple ment a Material Design 17 Use `Polymer.PaperDialogBehavior` and `paper-dialog-shared-styles.html` to imple ment a Material Design
22 dialog. 18 dialog.
23 19
24 For example, if `<paper-dialog-impl>` implements this behavior: 20 For example, if `<paper-dialog-impl>` implements this behavior:
25 21
26 <paper-dialog-impl> 22 <paper-dialog-impl>
27 <h2>Header</h2> 23 <h2>Header</h2>
28 <div>Dialog body</div> 24 <div>Dialog body</div>
29 <div class="buttons"> 25 <div class="buttons">
30 <paper-button dialog-dismiss>Cancel</paper-button> 26 <paper-button dialog-dismiss>Cancel</paper-button>
31 <paper-button dialog-confirm>Accept</paper-button> 27 <paper-button dialog-confirm>Accept</paper-button>
32 </div> 28 </div>
33 </paper-dialog-impl> 29 </paper-dialog-impl>
34 30
35 `paper-dialog-shared-styles.html` provide styles for a header, content area, and an action area for buttons. 31 `paper-dialog-shared-styles.html` provide styles for a header, content area, and an action area for buttons.
36 Use the `<h2>` tag for the header and the `buttons` class for the action area. Y ou can use the 32 Use the `<h2>` tag for the header and the `buttons` class for the action area. Y ou can use the
37 `paper-dialog-scrollable` element (in its own repository) if you need a scrollin g content area. 33 `paper-dialog-scrollable` element (in its own repository) if you need a scrollin g content area.
38 34
39 Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls to close the 35 Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls to close the
40 dialog. If the user dismisses the dialog with `dialog-confirm`, the `closingReas on` will update 36 dialog. If the user dismisses the dialog with `dialog-confirm`, the `closingReas on` will update
41 to include `confirmed: true`. 37 to include `confirmed: true`.
42 38
43 ### Styling
44
45 The following custom properties and mixins are available for styling.
46
47 Custom property | Description | Default
48 ----------------|-------------|----------
49 `--paper-dialog-background-color` | Dialog background color | `--primary-background-color`
50 `--paper-dialog-color` | Dialog foreground color | `--primary-text-color`
51 `--paper-dialog` | Mixin applied to the dialog | `{}`
52 `--paper-dialog-title` | Mixin applied to the title (`<h2>`) element | `{}`
53 `--paper-dialog-button-color` | Button area foreground color | `--default-primary-color`
54
55 ### Accessibility 39 ### Accessibility
56 40
57 This element has `role="dialog"` by default. Depending on the context, it may be more appropriate 41 This element has `role="dialog"` by default. Depending on the context, it may be more appropriate
58 to override this attribute with `role="alertdialog"`. 42 to override this attribute with `role="alertdialog"`.
59 43
60 If `modal` is set, the element will set `aria-modal` and prevent the focus from exiting the element. 44 If `modal` is set, the element will prevent the focus from exiting the element.
61 It will also ensure that focus remains in the dialog. 45 It will also ensure that focus remains in the dialog.
62 46
63 @hero hero.svg 47 @hero hero.svg
64 @demo demo/index.html 48 @demo demo/index.html
65 @polymerBehavior Polymer.PaperDialogBehavior 49 @polymerBehavior Polymer.PaperDialogBehavior
66 */ 50 */
67 51
68 Polymer.PaperDialogBehaviorImpl = { 52 Polymer.PaperDialogBehaviorImpl = {
69 53
70 hostAttributes: { 54 hostAttributes: {
(...skipping 22 matching lines...) Expand all
93 }, 77 },
94 78
95 ready: function () { 79 ready: function () {
96 // Only now these properties can be read. 80 // Only now these properties can be read.
97 this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick; 81 this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick;
98 this.__prevNoCancelOnEscKey = this.noCancelOnEscKey; 82 this.__prevNoCancelOnEscKey = this.noCancelOnEscKey;
99 this.__prevWithBackdrop = this.withBackdrop; 83 this.__prevWithBackdrop = this.withBackdrop;
100 }, 84 },
101 85
102 _modalChanged: function(modal, readied) { 86 _modalChanged: function(modal, readied) {
103 if (modal) {
104 this.setAttribute('aria-modal', 'true');
105 } else {
106 this.setAttribute('aria-modal', 'false');
107 }
108
109 // modal implies noCancelOnOutsideClick, noCancelOnEscKey and withBackdrop . 87 // modal implies noCancelOnOutsideClick, noCancelOnEscKey and withBackdrop .
110 // We need to wait for the element to be ready before we can read the 88 // We need to wait for the element to be ready before we can read the
111 // properties values. 89 // properties values.
112 if (!readied) { 90 if (!readied) {
113 return; 91 return;
114 } 92 }
115 93
116 if (modal) { 94 if (modal) {
117 this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick; 95 this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick;
118 this.__prevNoCancelOnEscKey = this.noCancelOnEscKey; 96 this.__prevNoCancelOnEscKey = this.noCancelOnEscKey;
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after
153 } 131 }
154 } 132 }
155 } 133 }
156 134
157 }; 135 };
158 136
159 /** @polymerBehavior */ 137 /** @polymerBehavior */
160 Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialo gBehaviorImpl]; 138 Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialo gBehaviorImpl];
161 139
162 </script> 140 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698