1<!-- 2Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 6Code distributed by Google as part of the polymer project is also 7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 8--> 9 10<!-- 11 12Material Design: <a href="http://www.google.com/design/spec/components/dialogs.html">Dialogs</a> 13 14`paper-dialog` is an overlay with a drop shadow. 15 16Example: 17 18 <paper-dialog heading="Dialog Title"> 19 <p>Some content</p> 20 </paper-dialog> 21 22Styling 23------- 24 25Because a `paper-dialog` is `layered` by default, you need to use the `/deep/` 26combinator to style all instances of the `paper-dialog`. Style the position, 27colors and other inherited properties of the dialog using the 28`html /deep/ paper-dialog` selector. Use the `html /deep/ paper-dialog::shadow #scroller` selector to size the dialog. Note that if you provided actions, the height 29of the actions will be added to the height of the dialog. 30 31 html /deep/ paper-dialog { 32 color: green; 33 } 34 35 html /deep/ paper-dialog::shadow #scroller { 36 height: 300px; 37 width: 300px; 38 } 39 40Transitions 41----------- 42 43You can use transitions provided by `core-transition` with this element. 44 45 <paper-dialog transition="core-transition-center"> 46 <p>Some content</p> 47 </paper-dialog> 48 49Accessibility 50------------- 51 52By default, the `aria-label` will be set to the value of the `heading` attribute. 53 54@group Paper Elements 55@element paper-dialog 56@extends paper-dialog-base 57@homepage github.io 58@status unstable 59--> 60<link href="../polymer/polymer.html" rel="import"> 61<link href="../paper-shadow/paper-shadow.html" rel="import"> 62 63<link href="paper-dialog-base.html" rel="import"> 64 65<polymer-element name="paper-dialog" extends="paper-dialog-base" role="dialog" layout vertical noscript> 66 67<template> 68 69 <style> 70 :host { 71 background: #fff; 72 color: rgba(0, 0, 0, 0.87); 73 margin: 32px; 74 overflow: visible !important; 75 } 76 77 h1 { 78 font-size: 20px; 79 } 80 81 #scroller { 82 overflow: auto; 83 box-sizing: border-box; 84 padding: 24px; 85 } 86 </style> 87 88 <paper-shadow z="3" fit></paper-shadow> 89 90 <!-- need this because the host needs to be overflow: visible --> 91 <div id="scroller" relative flex auto> 92 <template if="{{heading}}"> 93 <h1>{{heading}}</h1> 94 </template> 95 96 <content></content> 97 </div> 98 99</template> 100 101</polymer-element> 102