ember-micro-modal
Ember addon for MicroModal modal library.
Compatibility
- Ember.js v3.28 or above
- Ember CLI v3.28 or above
- Node.js v14 or above
Installation
ember install ember-micro-modal
CSS is not included by default. If you want to apply default styles just include to your app.css
like @import 'micro-modal.css'
or in scss, less @import 'micro-modal'
.
To see default modal html structure.
Usage
You can change all global configuration settings via config/environment.js
file.
Please check MicroModal site for more configuration details.
ENV['ember-micro-modal'] = {
onShow: (modal) => console.info(`${modal.id} is shown`),
onClose: (modal) => console.info(`${modal.id} is hidden`),
openTrigger: 'data-custom-open',
closeTrigger: 'data-custom-close',
openClass: 'is-open',
disableScroll: true,
disableFocus: false,
awaitOpenAnimation: false,
awaitCloseAnimation: false,
debugMode: true,
};
There are also 2 parameters. @show and @clickToOverlay. @show parameter simply responsible to modal visibility. If value is true modal will be visible. @clickToOverlay parameter is responsible to whether modal overlay clickable or not. If value is true overlay click will close the modal.
```handlebars
<MicroModal @show={{this.show}} @onShow={{fn this.onShow}} @onClose={{fn this.onClose}} as |modal|> <modal.container class="col-6" as |container|> <container.header class="col">
Micromodal
Try hitting the
tab
key and notice how the focus stays within the modal itself. Also,
esc
to close modal.
Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
I'm sorry that i don't have time to write tests. Please report if you find any issue.
Thanks.
## License
This project is licensed under the [MIT License](LICENSE.md).