thoughtindustries/ti-modal

Bootstrap-styled modals for Ember.js. Includes header & button support.

ti-modal

Bootstrap-styled modals for Ember.js. Includes header & button support.

Assumes you are using ember-app-kit (more specifically ember-jj-abrams-resolver)

Installation

Import the initializer before you create your app, e.g.

  import Resolver from 'ember/resolver';
  import 'ti-modal/initializer';

  export default Ember.Application.extend({
    Resolver: Resolver['default']
  });

Add the open and close actions to your Application Route:

(in routes/application.js)

  import { ModalRoutingMixin } from 'ti-modal';

  export default Ember.Route.extend(ModalRoutingMixin, {
    ... your application-level actions here ...
  });

Usage

Create a Modal Controller with:

  import {ModalController} from 'ti-modal';

  export default ModalController.extend({
    header: 'This is the modal header',

    buttons: [
      {label: 'Cancel', className: 'btn-default pull-left', action: 'close'},
      {label: 'Checkout', className: 'btn-default', action: 'checkout'}
    ]
  });

Create a Modal template with:

  {{#ti-modal close="close" checkout="checkout" header=header buttons=buttons}}
    Your modal content here
  {{/ti-modal}}

...and finally trigger a modal with:

  <a href="#" {{action 'openModal' 'your-modal-controller-name' model}}>Shopping Cart</a>

TODO

Tests!!

LICENSE

MIT