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

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
  11 <link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
  12 <link rel="import" href="../paper-styles/paper-styles.html">
  13
  14 <!--
  15 `<paper-dialog>` is a dialog with Material Design styling and optional animations when it is
  16 opened or closed. It provides styles for a header, content area, and an action area for buttons.
  17 You can use the `<paper-dialog-scrollable` element (in its own repository) if you need a scrolling
  18 content area. See `Polymer.PaperDialogBehavior` for specifics.
  19
  20 For example, the following code implements a dialog with a header, scrolling content area and
  21 buttons.
  22
  23     <paper-dialog>
  24       <h2>Header</h2>
  25       <paper-dialog-scrollable>
  26         Lorem ipsum...
  27       </paper-dialog-scrollable>
  28       <div class="buttons">
  29         <paper-button dialog-dismiss>Cancel</paper-button>
  30         <paper-button dialog-confirm>Accept</paper-button>
  31       </div>
  32     </paper-dialog>
  33
  34 ### Styling
  35
  36 See the docs for `Polymer.PaperDialogBehavior` for the custom properties available for styling
  37 this element.
  38
  39 ### Animations
  40
  41 Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
  42 is opened or closed. See the documentation in
  43 [PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.
  44
  45 For example:
  46
  47     <link rel="import" href="components/neon-animation/animations/scale-up-animation.html">
  48     <link rel="import" href="components/neon-animation/animations/fade-out-animation.html">
  49
  50     <paper-dialog entry-animation="scale-up-animation"
  51                   exit-animation="fade-out-animation">
  52       <h2>Header</h2>
  53       <div>Dialog body</div>
  54     </paper-dialog>
  55
  56 ### Accessibility
  57
  58 See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this
  59 element.
  60
  61 @group Paper Elements
  62 @element paper-dialog
  63 @hero hero.svg
  64 @demo demo/index.html
  65 -->
  66
  67 </head><body><dom-module id="paper-dialog">
  68
  69   <link rel="import" type="css" href="../paper-dialog-behavior/paper-dialog-common.css">
  70
  71   <template>
  72     <content></content>
  73   </template>
  74
  75 </dom-module>
  76
  77 <script src="paper-dialog-extracted.js"></script></body></html>