@polymer/paper-dialog
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.1 • Public • Published

    Published on NPM Build status Published on webcomponents.org

    <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

    Install

    npm i @polymer/paper-dialog

    DownloadsWeekly Downloads

    6,518

    Version

    3.0.1

    License

    BSD-3-Clause

    Unpacked Size

    33.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • kevinpschaaf
    • aomarks
    • emarquez
    • sorvell
    • bicknellr
    • usergenic
    • polymer-devs
    • azakus
    • justinfagnani
    • tvanderlippe
    • straversi