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-action-dialog` is a `paper-dialog` with 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>
    105