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 fa-icons is currently sponsored by ObsidianSoft and generously supported by contributions from individuals.