Ember

TEDModals

Modal components, styled and mobile-first

Requirements

This addon requires the following addons be installed:

ember install ember-cli-sass
ember install ember-screen
ember install ember-cli-ted-bootstrap
ember install ember-modal-dialog

Installation

ember install ember-ted-modals

Then, import the styles into your app.scss:

// app.scss
@import 'ember-ted-modals/structure';
@import 'ember-ted-modals/styles';

Usage

{{#if isShowingModal}}
  {{#ted-modal close='toggleIsShowingModal'}}
    {{ted-modal-header title='Present stage' close='toggleIsShowingModal'}}

    {{#ted-modal-body}}
      <p>Would you like to present the stage on this device?</p>
      <p>If you do, you can get back here by pressing the Back button.</p>
    {{/ted-modal-body}}

    {{#ted-modal-footer}}
      <a href="#" {{action 'toggleIsShowingModal'}} class='btn btn-link'>Cancel</a>
      <a href="#" {{action 'presentStage'}} class='btn btn-primary pull-right'>Present stage</a>
    {{/ted-modal-footer}}
  {{/ted-modal}}
{{/if}}