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 --> 9 10 <!-- 11 Provides a dialog overlay. 12 13 Child elements that include a `dismissive` attribute are positioned in the lower left corner of the dialog. Elements that use the `affirmative` attribute are positioned in the lower right corner. 14 15 Child elements that include the `dismissive` or `affirmative` attribute will automatically toggle the dialog when clicked. 16 17 One child element should have the `autofocus` attribute so that the Enter key will automatically take action. This is 18 especially important for screen reader environments. 19 20 Example: 21 22 <paper-dialog heading="Title for dialog"> 23 <p>Lorem ipsum ....</p> 24 <p>Id qui scripta ...</p> 25 <paper-button label="More Info..." dismissive></paper-button> 26 <paper-button label="Decline" affirmative></paper-button> 27 <paper-button label="Accept" affirmative autofocus></paper-button> 28 </paper-dialog> 29 30 #### Transitions 31 32 `<paper-dialog>` can be used with `<paper-transition>` to transition the overlay open and close. 33 34 To use a transition, import `paper-dialog-transition.html` alongside paper-dialog: 35 36 <link rel="import" href="paper-dialog/paper-dialog-transition.html"> 37 38 Then set the `transition` attribute: 39 40 <paper-dialog heading="Title for dialog" transition="paper-transition-center"> 41 42 <paper-dialog heading="Title for dialog" transition="paper-transition-bottom"> 43 44 @group Paper Elements 45 @element paper-dialog 46 @homepage github.io 47 --> 48 <!-- 49 Fired when the dialog's `opened` property changes. 50 51 @event core-overlay-open 52 @param {Object} detail 53 @param {Object} detail.opened the opened state 54 --> 55 <link href="../polymer/polymer.html" rel="import"> 56 <link href="../core-overlay/core-overlay.html" rel="import"> 57 <link href="../paper-shadow/paper-shadow.html" rel="import"> 58 59 <polymer-element name="paper-dialog" attributes="opened heading transition autoCloseDisabled backdrop layered closeSelector" role="dialog"> 60 61 <template> 62 63 <link href="paper-dialog.css" rel="stylesheet"> 64 65 <div id="shadow"> 66 <paper-shadow z="3" hasPosition></paper-shadow> 67 </div> 68 69 <core-overlay id="overlay" opened="{{opened}}" autoCloseDisabled?="{{autoCloseDisabled}}" backdrop?="{{backdrop}}" layered?="{{layered}}" target="{{}}" sizingTarget="{{$.container}}" closeSelector="{{closeSelector}}" transition="{{transition}}" margin="20"></core-overlay> 70 71 <div id="container" layout vertical> 72 73 <div id="actions" layout horizontal> 74 <content select="[dismissive]"></content> 75 <div flex auto></div> 76 <content select="[affirmative]"></content> 77 </div> 78 79 <div id="main" flex auto> 80 <h1>{{heading}}</h1> 81 <content></content> 82 </div> 83 84 </div> 85 86 </template> 87 88 <script> 89 90 Polymer('paper-dialog', { 91 92 /** 93 * Set opened to true to show the dialog and to false to hide it. 94 * A dialog may be made intially opened by setting its opened attribute. 95 96 * @attribute opened 97 * @type boolean 98 * @default false 99 */ 100 opened: false, 101 102 /** 103 * If true, the dialog has a backdrop darkening the rest of the screen. 104 * The backdrop element is attached to the document body and may be styled 105 * with the class `core-overlay-backdrop`. When opened the `core-opened` 106 * class is applied. 107 * 108 * @attribute backdrop 109 * @type boolean 110 * @default false 111 */ 112 backdrop: false, 113 114 /** 115 * If true, the dialog is guaranteed to display above page content. 116 * 117 * @attribute layered 118 * @type boolean 119 * @default false 120 */ 121 layered: false, 122 123 /** 124 * By default a dialog will close automatically if the user 125 * taps outside it or presses the escape key. Disable this 126 * behavior by setting the `autoCloseDisabled` property to true. 127 * @attribute autoCloseDisabled 128 * @type boolean 129 * @default false 130 */ 131 autoCloseDisabled: false, 132 133 /** 134 * This property specifies a selector matching elements that should 135 * close the dialog on tap. 136 * 137 * @attribute closeSelector 138 * @type string 139 * @default "" 140 */ 141 closeSelector: '[dismissive],[affirmative]', 142 143 /** 144 * @attribute heading 145 * @type string 146 * @default '' 147 */ 148 heading: '', 149 150 /** 151 * Set this property to the id of a <core-transition> element to specify 152 * the transition to use when opening/closing this dialog. 153 * 154 * @attribute transition 155 * @type string 156 * @default '' 157 */ 158 transition: '', 159 160 /** 161 * Toggle the dialog's opened state. 162 * @method toggle 163 */ 164 toggle: function() { 165 this.$.overlay.toggle(); 166 }, 167 168 headingChanged: function() { 169 this.setAttribute('aria-label', this.heading); 170 } 171 172 }); 173 174 </script> 175 176 </polymer-element> 177
