[![Build status](https://travis-ci.org/PolymerElements/paper-dialog.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-dialog)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/PolymerElements/paper-dialog)

## <paper-dialog>

Material design: [Dialogs](https://www.google.com/design/spec/components/dialogs.html)

`<paper-dialog>` is a dialog with Material Design styling and optional animations when it is
opened or closed. It provides styles for a header, content area, and an action area for buttons.
You can use the `<paper-dialog-scrollable>` element (in its own repository) if you need a scrolling
content area. To autofocus a specific child element after opening the dialog, give it the `autofocus`
attribute. See `Polymer.PaperDialogBehavior` and `Polymer.IronOverlayBehavior` for specifics.

For example, the following code implements a dialog with a header, scrolling content area and
buttons. Focus will be given to the `dialog-confirm` button when the dialog is opened.

```html
<paper-dialog>
  <h2>Header</h2>
  <paper-dialog-scrollable>
    Lorem ipsum...
  </paper-dialog-scrollable>
  <div class="buttons">
    <paper-button dialog-dismiss>Cancel</paper-button>
    <paper-button dialog-confirm autofocus>Accept</paper-button>
  </div>
</paper-dialog>
```

### Changes in 2.0
- `paper-dialog-behavior 2.0` styles only direct `h2` and `.buttons` children of the dialog because of how [`::slotted` works](https://developers.google.com/web/fundamentals/primers/shadowdom/?hl=en#stylinglightdom) 
(compound selector will select only top level nodes)
- `neon-animation 2.0` doesn't import the Web Animations polyfill, so you'll have to import it ([see Animations section](#Animations))

### Styling

See the docs for `Polymer.PaperDialogBehavior` for the custom properties available for styling
this element.

### Animations

Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
is opened or closed. See the documentation in
[PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.

For example:

```html
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../neon-animation/animations/fade-out-animation.html">

<paper-dialog entry-animation="scale-up-animation"
              exit-animation="fade-out-animation">
  <h2>Header</h2>
  <div>Dialog body</div>
</paper-dialog>
```

### Accessibility

See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this
element.