An ember-cli addon to manage modals as promises.
In your application's directory:
ember install ember-modal-serviceAll the modals are shown inside the modal container once opened.
{{! templates/application.hbs }}
<ModalContainer />In order to register a new modal, you need to register the modal object in the application container using the preffix modal-*.
// app/components/modal-foo.js
import ModalComponent from 'ember-modal-service/components/modal';
export default class FooModal extends ModalComponent {
data = this.model.options.data;
}{{! app/templates/modal-foo.hbs }}
<div>
<p>{{data}}</p>
</div>import Controller from '@ember/controller';
import { action } from '@ember/object';
export default class Controller extends Controller {
// Inject the service
@service modal;
@action
async doSomething() {
// To open a modal use the method `open` with the modal name and the options for the modal.
try {
const result = await this.modal.open('foo', { bar: 'bar' });
// Modal have been resolved
} catch(e) {
// Modal have been rejected
}
}You can close all modals by using the close method.
this.modal.close();Or just some of them.
this.modal.close((modal) => {
return modal.name === 'foo';
});
this.modal.close('name', 'foo');Base modal component provides resolve & reject actions so you can implement basic closing behaviour directly on the template. You can pass any arguments you want the modal to be resolved / rejected with
<button {{fn this.reject "foo" "bar"}}>Resolve modal with two args</button>
<button {{fn this.reject "foo" "bar"}}>Reject modal with two args</button>If you want to contribute to this addon, please read the CONTRIBUTING.md.
We use SemVer for versioning. For the versions available, see the tags on this repository.
See the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent