Ember-confirm-dialog NPM

DEMO: http://annotationsro.github.io/ember-confirm-dialog/

<<<<<<< HEAD

Ember-confirm-dialog

=======

Compatibility

Ember.js v3.4 or above
Ember CLI v2.13 or above
Node.js v8 or above

Installation

a9d95cc... message

Confirm user actions - just wrap your button/link/whatever with this addon. The target action will be called only when user confirms the dialog.

This addon relies on ember-modal-dialog to show the dialog itself.

Install

Do not forget to add these SASS imports into your app.scss - sorry about that - if you know how to make this easier, let me know :(

@import "ember-modal-dialog/ember-modal-structure";
@import "ember-modal-dialog/ember-modal-appearance";

Usage

Simple confirm dialog (with default settings)

Action confirmedAction will be called only when user confirms the confirmation dialog.

{{#confirm-dialog}}
    <button {{action 'confirmedAction'}}>Click me!</button>
{{/confirm-dialog}}

You can also use a property disabled to control whether the confirm dialog should be enabled or not.

<<<<<<< HEAD

Confirm dialog with custom texts and all the callbacks

Custom callbacks for confirm and cancel buttons

{{#confirm-dialog
text="Do you want to destry the world?"
confirmButton="Yeah, do it!"
cancelButton="Noooooo!!!!!"
confirmAction=(action 'confirmDestroy')
cancelAction=(action 'cancelDestroy')
}}
    <button {{action 'destroyWorld'}}>DESTROY THE WORLD !</button>
{{/confirm-dialog}}

Confirm dialog with Bootstrap (CSS classes for confirm/cancel buttons) + FontAwesome icons in buttons

Note: any font icon set is supported, not only FontAwesome

{{#confirm-dialog
confirmButtonClass="btn btn-success"
cancelButtonClass="btn btn-danger"
okCssIcon="fa fa-check-circle-o"
cancelCssIcon="fa fa-ban"
}}
    <button {{action 'confirmedAction'}}>Click me!</button>
{{/confirm-dialog}}

Confirm dialog with title and custom CSS classes

  {{#confirm-dialog
  dialogClass="custom-confirm-dialog"
  title="This is a title"
  text="And this is a content"
  }}

In your SASS/CSS

.custom-confirm-dialog {

  .dialog-title{
    background-color: aqua;
  }

  .dialog-text{
    color: red;
  }

  .dialog-footer{
    background-color: gray;
  }
}