third_party/polymer/components/paper-dialog/paper-dialog.html

   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>