(no summary available)

License - MIT Published on NPM Published on Vaadin  Directory

<confirm-element>

Description.

confirmation window with two buttons and editable icons

Installation

npm install confirm-element"@0.0.1"

Screenshot of confirm-element

Configuration :

  • Use open to show the window.
  • Use title to add title.
  • Use message to add the body of the message to be displayed.
  • Use confirmtext add text to the confirmation button.
  • Use canceltext add text to the cancel button
  • Use icon for the visibility of the icons, default value false.
  • Use iconcancel and iconconfirm to add the icons to each button correspondingly, the available icons correspond to the portfolio of VAADIN ICONS, default values lumo:cross and lumo:checkmark, if you prefer buttons without icon: iconconfirm="none" or iconcancel="none"

Events

cancel: CustomEvent the cancel event is activated by pressing the cancel button or the ESC key.

confirm: CustomEvent
the event is activated by pressing the confirm button

<confirm-element 
    open
    title="Warming"
    message="Do you want to save changes?" 
    confirmtext="Save" 
    canceltext="Discart" 
    icon 
    iconcancel="none" 
    iconconfirm="lumo:edit"
></confirm-element>

Usage

In an html file

<html>
  <head>
    <script type="module">
      import '.././confirm-element.js';
    </script>
  </head>
  <body>

    <confirm-element 
      id="showconfirm" 
      confirmtext="OK" 
      canceltext="Cancel" 
      title="Close"
      message="Are you sure you want to close this window?" 
      icon iconcancel="none" 
      iconconfirm="lumo:checkmark"
    ></confirm-element>

  </body>
</html>

In a Polymer 3 element

import {PolymerElement, html} from '@polymer/polymer';
import '.././confirm-element.js';

class SampleElement extends PolymerElement {
  static get template() {
    return html`

        <confirm-element 
            id="showconfirm" 
            title="Close"
            message="Are you sure you want to close this window?" 
            confirmtext="OK" 
            canceltext="Cancel" 
            icon 
            iconcancel="none" 
            iconconfirm="lumo:checkmark"
        ></confirm-element>
    `;
  }
  ready(){
      this.message = this.$.showconfirm;
      this.message.addEventListener('confirm', () => this.confirmDialog());
  }
  confirmDialog(){
      ............
  }
}
customElements.define('sample-element', SampleElement);

License

MIT License

Install

Link to this version
ImportedReleased 25 March 2019MIT License
Framework Support
Polymer 3.0+
Browser Independent
Install with
npm install confirm-element"@0.0.2"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.0.2

Dependencies

  • @polymer/iron-icon#^3.0.1
  • @polymer/paper-button#^3.0.1
  • @polymer/polymer#^3.0.0
  • @vaadin/vaadin-dialog#^2.2.1