Home | History | Annotate | Download | only in paper-dialog 
      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 
     12 Material 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 
     16 Example:
     17 
     18     <paper-dialog heading="Dialog Title">
     19       <p>Some content</p>
     20     </paper-dialog>
     21 
     22 Styling
     23 -------
     24 
     25 Because a `paper-dialog` is `layered` by default, you need to use the `/deep/`
     26 combinator to style all instances of the `paper-dialog`. Style the position,
     27 colors 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
     29 of 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 
     40 Transitions
     41 -----------
     42 
     43 You 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 
     49 Accessibility
     50 -------------
     51 
     52 By 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