ember-native-modal v0.0.2
ember-native-modal
Introducing ember-native-modal: A Powerful, User-Friendly Modal Addon for Ember.js
The ember-native-modal addon is a robust and easy-to-implement solution for Ember.js applications that harnesses the power of native HTML5 dialog elements to offer a highly engaging, accessible, and seamless user experience. With ember-native-modal, effortlessly create interactive modals, dialog boxes, and pop-ups that integrate seamlessly with your Ember app, while maintaining high performance and clean, maintainable code.
key features of ember-native-modal:
Native HTML5 dialog support: Utilize the built-in capabilities of HTML5 dialog elements for an enhanced, out-of-the-box user experience.
Easy Integration: Get up and running quickly with minimal configuration, effortlessly integrating modals and dialogs into your existing Ember.js application.
Accessibility: Designed with accessibility in mind, ember-native-modal ensures your dialogs and modals are user-friendly and easy to navigate for all users, including those with disabilities.
Customizable: Style and customize your dialogs and modals to match your application's look and feel, ensuring a consistent user experience across all interactions.
Compatibility
- Ember.js v3.28 or above
- Ember CLI v3.28 or above
- Node.js v14 or above
Installation
ember install ember-native-modal
Usage
Example using a modal
<dialog {{modal-helper open=this.isModalOpen}}>
<div>
<p>This is a modal</p>
<button type="button" {{on "click" this.toggleModal}}>Close</button>
</div>
</dialog>
<button type="button" {{on "click" this.toggleModal}}>open modal</button>
export default class MyComponent extends Component {
@tracked isModalOpen = false;
@action
toggleModal() {
this.isModalOpen = !this.isModalOpen;
}
}
Example using a dialog
<dialog {{dialog-helper open=this.isDialogOpen}}>
<div>
<p>This is a dialog</p>
<button type="button" {{on "click" this.toggleDialog}}>Close</button>
</div>
</dialog>
<button type="button" {{on "click" this.toggleDialog}}>open modal</button>
export default class MyComponent extends Component {
@tracked isDialogOpen = false;
@action
toggleDialog() {
this.isDialogOpen = !this.isDialogOpen;
}
}
HTMLDialogElement Feature Parity
Feature | Support |
---|---|
Behavior related to open property | ✅ |
Behavior related to returnValue property | ❌ |
Behavior related to close() method | ✅ |
Behavior related to show() method for dialogs | ✅ |
Behavior related to showModal() method for modals | ✅ |
Behavior related to cancel event | ❌ |
Behavior related to close event | ❌ |
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.