• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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-action-dialog` is a `paper-dialog` with a row of buttons at the bottom that
15indicate user action. The action buttons do not scroll with the dialog body.
16
17The buttons should have either the `affirmative` or `dismissive` attribute. See
18the Material Design spec for more info.
19
20Example:
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