third_party/polymer/components/paper-dialog/paper-action-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-action-dialog` is a `paper-dialog` a row of buttons at the bottom that
  15 indicate user action. The action buttons do not scroll with the dialog body.
  16
  17 The buttons should have either the `affirmative` or `dismissive` attribute. See
  18 the Material Design spec for more info.
  19
  20 Example:
  21
  22     <paper-action-dialog heading="Dialog Title">
  23       <p>Some content</p>
  24       <paper-button dismissive>More Info</paper-button>
  25       <paper-button affirmative>Decline</paper-button>
  26       <paper-button affirmative>Accept</paper-button>
  27     </paper-action-dialog>
  28
  29 @group Paper Elements
  30 @element paper-action-dialog
  31 @extends paper-dialog-base
  32 @homepage github.io
  33 @status unstable
  34 -->
  35 <link href="../polymer/polymer.html" rel="import">
  36 <link href="../paper-shadow/paper-shadow.html" rel="import">
  37
  38 <link href="paper-dialog-base.html" rel="import">
  39
  40 <polymer-element name="paper-action-dialog" extends="paper-dialog-base" role="dialog" layout vertical>
  41
  42 <template>
  43
  44   <style>
  45     :host {
  46       background: #fff;
  47       color: rgba(0, 0, 0, 0.87);
  48       margin: 32px;
  49       overflow: visible !important;
  50     }
  51
  52     h1 {
  53       font-size: 20px;
  54     }
  55
  56     #scroller {
  57       overflow: auto;
  58       box-sizing: border-box;
  59       padding: 24px 24px 0 24px;
  60     }
  61
  62     #actions {
  63       padding: 16px;
  64     }
  65   </style>
  66
  67   <paper-shadow z="3" fit></paper-shadow>
  68
  69   <!-- need this because the host needs to be overflow: visible -->
  70   <div id="scroller" relative flex auto>
  71     <template if="{{heading}}">
  72       <h1>{{heading}}</h1>
  73     </template>
  74
  75     <content select=":not([affirmative]):not([dismissive])"></content>
  76   </div>
  77
  78   <div id="actions" relative layout horizontal>
  79     <content select="[dismissive]"></content>
  80     <div flex></div>
  81     <content select="[affirmative]"></content>
  82   </div>
  83
  84 </template>
  85
  86 <script>
  87
  88   Polymer({
  89
  90     publish: {
  91
  92       /**
  93        * @attribute closeSelector
  94        * @type string
  95        * @default '[affirmative],[dismissive]'
  96        */
  97       closeSelector: '[affirmative],[dismissive]'
  98     }
  99
 100   });
 101
 102 </script>
 103
 104 </polymer-element>