New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

org.webjars.bowergithub.polymerelements:paper-dialog

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

org.webjars.bowergithub.polymerelements:paper-dialog

WebJar for paper-dialog

Version published: 6 years ago

Maintainers: 1

Source

<paper-dialog>

<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 PaperDialogBehavior and 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.

<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>

Styling

See the docs for 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 for more info.

For example:

<script type="module">
  import '@polymer/neon-animation/animations/scale-up-animation.js';
  import '@polymer/neon-animation/animations/fade-out-animation.js';
</script>

<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 PaperDialogBehavior for accessibility features implemented by this element.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/paper-dialog

In an html file

<html>
  <head>
    <script type="module">
      import '@polymer/paper-dialog/paper-dialog.js';
    </script>
  </head>
  <body>
    <paper-dialog>
      <h2>Content</h2>
    </paper-dialog>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-dialog/paper-dialog.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <paper-dialog>
        <h2>Content</h2>
      </paper-dialog>
    `;
  }
}
customElements.define('sample-element', SampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/paper-dialog
cd paper-dialog
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

FAQs

What is org.webjars.bowergithub.polymerelements:paper-dialog?

Is org.webjars.bowergithub.polymerelements:paper-dialog well maintained?

Package last updated on 16 Dec 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install