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: { }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.