Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chalkedgoose/ember-native-modal
Effortlessly create native HTML5 modals and dialogs in your Ember.js applications with enhanced accessibility and customization.
https://github.com/chalkedgoose/ember-native-modal
dialogs ember ember-addon modals typescript
Last synced: 23 days ago
JSON representation
Effortlessly create native HTML5 modals and dialogs in your Ember.js applications with enhanced accessibility and customization.
- Host: GitHub
- URL: https://github.com/chalkedgoose/ember-native-modal
- Owner: chalkedgoose
- License: mit
- Created: 2023-05-03T00:28:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-30T14:02:44.000Z (about 1 month ago)
- Last Synced: 2024-10-01T08:41:46.595Z (about 1 month ago)
- Topics: dialogs, ember, ember-addon, modals, typescript
- Language: JavaScript
- Homepage: https://bright-medovik-452735.netlify.app/
- Size: 1.75 MB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# 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
```hbs
This is a modal
Close
open modal
```
```js
export default class MyComponent extends Component {
@tracked isModalOpen = false;
@action
toggleModal() {
this.isModalOpen = !this.isModalOpen;
}
}
```
#### Example using a dialog
```hbs
This is a dialog
Close
open modal
```
```js
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](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).