native-modal

Native webcomponent modal for the Polymer 3 with LitElement.

Installation

npm i @obsidiansoft/native-modal

Properties

Property	Type	Description
title	String	Header title for the modal
alwaysFullScreen (optional)	Boolean	Makes the modal occupy the entire screen in desktop
style	String	Styles, must follow the StylesInline standard
device	String	Type of devices (must be 'ios' or 'android')
hideHeader	Boolean	Hide title header

Example

  <native-modal title="native modal title"  alwaysFullScreen>
    <div slot="content">
      <button @click="${this.hanldeclic}">close modal</button>
    </div>
    <button slot="btn-action">open modal</button> 
  </native-modal>

Usage with LitElement and slot tag

🚨 We don't advise the use with Polymer Element because it's deprecated. note: use tag slot for render elemenets into modal, use slot="content" for add elements in the modal body and use slot="btn-action" for add open action in a element (this case is a button element)

import { LitElement, html} from 'lit-element';
import '@obsidiansoft/native-modal';

class SomeClass extends LitElement {
 render() {
    return html`
      <native-modal title="native modal title"  alwaysFullScreen>
        <div slot="content">
          modal body here
        </div>
        <button slot="btn-action">open modal</button> 
      </native-modal>
    `;
  }
}

customElements.define('custom-component', SomeClass );

Usage with CustomEvents

add event 'toggleNativeModal' for open or close modal

import { LitElement, html} from 'lit-element';
import '@obsidiansoft/native-modal';

class SomeClass extends LitElement {
 hanldeclic(e) {
    let myEvent = new CustomEvent('toggleNativeModal', {
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(myEvent);
  }
 render() {
    return html`
      <native-modal title="native modal title"  alwaysFullScreen>
        <div slot="content">
          <button @click="${this.hanldeclic}">close modal</button>
        </div>
        <button slot="btn-action">open modal</button> 
      </native-modal>
    `;
  }
}

customElements.define('custom-component', SomeClass );

Supported Node Versions

We have test it with node >= 10. We will support on even Nodejs versions that are current or in maintenance.

License

Unless otherwise noted, the fa-icon source files are distributed under the MIT license found in the LICENSE file.

Sponsorship

Development of the native-modal is currently sponsored by ObsidianSoft and generously supported by contributions from individuals.