Not Pictured: Mangoes

    @anypoint-web-components/anypoint-dialog
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.10 • Public • Published

    anypoint-dialog

    A material design dialog, also styled for Anypoint platform.

    Anypoint web components are set of components that allows to build Anypoint enabled UI in open source projects.

    Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

    Published on NPM

    tests

    Usage

    Installation

    npm install @anypoint-web-components/anypoint-dialog --save

    In an html file

    <html>
      <head>
        <script type="module">
          import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
          import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
          import '@anypoint-web-components/anypoint-button/anypoint-button.js';
        </script>
      </head>
      <body>
        <anypoint-dialog>
          <h2>Dialog title</h2>
          <anypoint-dialog-scrollable>
            <p>Long content...</p>
          </anypoint-dialog-scrollable>
          <div class="buttons">
            <anypoint-button data-dialog-dismiss>Cancel</anypoint-button>
            <anypoint-button data-dialog-confirm autofocus>OK</anypoint-button>
          </div>
        </anypoint-dialog>
        <script>
        {
          document.querySelector('anypoint-dialog').addEventListener('overlay-closed', (e) => {
            console.log(e.detail.canceled); // only when outside click or ESC key press
            console.log(e.detail.confirmed); // true when "dialog-confirm" was pressed
          });
        }
        </script>
      </body>
    </html>

    In a LitElement

    import { LitElement, html } from 'lit-element';
    import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
    import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
    import '@anypoint-web-components/anypoint-button/anypoint-button.js';
    
    class SampleElement extends LitElement {
      render() {
        return html`
        <anypoint-dialog @overlay-closed="${this._dialogCloseHandler}">
          <h2>Dialog title</h2>
          <anypoint-dialog-scrollable>
            <p>Long content...</p>
          </anypoint-dialog-scrollable>
          <div class="buttons">
            <anypoint-button data-dialog-dismiss>Cancel</anypoint-button>
            <anypoint-button data-dialog-confirm autofocus>OK</anypoint-button>
          </div>
        </anypoint-dialog>
        `;
      }
    
      _dialogCloseHandler(e) {
        if (e.detail.confirmed) {
          // ...
        }
      }
    }
    customElements.define('sample-element', SampleElement);

    Action buttons

    Button with "dialog-dismiss" attribute will dismiss the dialog with "confirmed" property on a detail object of "overlay-closed" event set to false.

    Button with "dialog-confirm" attribute will close the dialog with "confirmed" property on a detail object of "overlay-closed" event set to true.

    Scrollable content

    If the content of the dialog may exceed window size then use anypoint-dialog-scrollable as a content wrapper. It has additional logic to keep the content in place. Otherwise use regular div or paragraph.

    Modal dialog

    Set "modal" property to true to render the dialog over a scrim, with ESC button handler and mouse click disabled. The user can dismiss the dialog only by using dialog actions.

    Development

    git clone https://github.com/anypoint-web-components/anypoint-dialog
    cd anypoint-dialog
    npm install

    Running the demo locally

    npm start

    Running the tests

    npm test

    Install

    npm i @anypoint-web-components/anypoint-dialog

    DownloadsWeekly Downloads

    413

    Version

    0.1.10

    License

    Apache-2.0

    Unpacked Size

    43.2 kB

    Total Files

    22

    Last publish

    Collaborators

    • jarrodek
    • twoplustwoone
    • lbauret
    • carowright