README
ember-frost-modal-dialog
A modal dialog for messages requiring some user feedback. This is a wrapper around ember-frost-modal that provides the base styles and block structure
Installation
ember install ember-frost-modal-dialog
API
| Attribute | Type | Value | Description |
|---|---|---|---|
modalName |
string |
<name> |
Mandatory unique name for the modal, accessible via ember-remodal service |
type |
string |
confirmation |
will display a confirmation dialog |
information |
will display an information dialog | ||
warning |
will display a warning dialog | ||
error |
will display an error dialog | ||
title |
string |
<title> |
Optional title for your dialog |
confirmAlias |
string |
<alias> |
Optional string alias for the primary action button in a modal |
onClose |
Function |
<action-name> |
Optional callback for when modal is closed |
onConfirmHandler |
Function |
<action-name> |
If confirmAlias is present, callback for when the confirm button is clicked |
onOpen |
Function |
<action-name> |
Optional callback for when modal is opened |
Examples
Template
Block-slot target yields the component used to launch the modal, e.g. a button
Optional Block-slot header yields a custom title template if title attr was not provided
Block-slot body yields the dialog content
A Cancel button is always rendered to allow the modal to be closed.
{{#frost-modal-dialog
modalName='my-dialog'
title='confirmation'
type='confirmation'
confirmAlias='Confirm'
onConfirmHandler=(action 'confirmHandler')}}
{{#block-slot slot 'target'}}
{{frost-button
priority="primary"
size="medium"
text='Confirmation dialog'
}}
{{/block-slot}}
{{#block-slot slot 'body'}}
Test
{{/block-slot}}
{{/frost-modal-dialog}}
Controller
actions: {
confirmHandler: function () {
}
}
Development
Setup
git clone git@github.com:ciena-frost/ember-frost-modal-dialog.git
cd ember-frost-modal-dialog
npm install && bower install
Development Server
A dummy application for development is available under ember-frost-modal-dialog/tests/dummy.
To run the server run ember server (or npm start) from the root of the repository and
visit the app at http://localhost:4200.
Testing
Run npm test from the root of the project to run linting checks as well as execute the test suite
and output code coverage.