https://github.com/obsidiansoft-io/native-modal
native modal for webcomponent with litElement
https://github.com/obsidiansoft-io/native-modal
litelement modal native polymer pwa-apps webcomponents
Last synced: about 2 months ago
JSON representation
native modal for webcomponent with litElement
- Host: GitHub
- URL: https://github.com/obsidiansoft-io/native-modal
- Owner: obsidiansoft-io
- License: mit
- Created: 2019-07-05T15:50:02.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-07-09T15:22:37.000Z (almost 7 years ago)
- Last Synced: 2025-06-28T01:41:16.064Z (12 months ago)
- Topics: litelement, modal, native, polymer, pwa-apps, webcomponents
- Language: JavaScript
- Size: 114 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# native-modal
Native webcomponent modal for the [Polymer 3](https://www.polymer-project.org/) with LitElement.
[](http://opensource.org/licenses/MIT)
## Installation
```bash
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
```html
close modal
open 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)
```javascript
import { LitElement, html} from 'lit-element';
import '@obsidiansoft/native-modal';
class SomeClass extends LitElement {
render() {
return html`
modal body here
open modal
`;
}
}
customElements.define('custom-component', SomeClass );
```
## Usage with CustomEvents
add event 'toggleNativeModal' for open or close modal
```javascript
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`
close modal
open 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](https://obsidiansoft.io/) and generously supported by contributions from individuals.