ember-frost-modal-input
A modal component that contains bunsen form content. Renders a custom header, a bunsen form and custom actions in the footer.
Installation
ember install ember-frost-modal-input
API
| Attribute | Type | Value | Description |
|---|---|---|---|
title |
string |
Optional custom title | |
subtitle |
string |
Optional custom subtitle | |
titleComponent |
string |
Optional title component to replace standard title/subtitle styles | |
modalName |
string |
Required name for the modal | |
onClose |
Function |
<action-name> |
Optional callback for when modal is closed |
onOpen |
Function |
<action-name> |
Optional callback for when modal is opened |
Examples
Component template using ember-block-slots
Below is an example of template.hbs
{{#frost-modal-input isValid=isValid formValue=formValue title='Edit user' subtitle='John Smith' modalName='my-test-modal' onOpen=(action 'open') onClose=(action 'clearForm') as |slot|}} {{#block-slot slot 'target'}} {{frost-button text='Open small form' priority='secondary' size='medium'}} {{/block-slot}} {{#block-slot slot 'body' as |content|}} {{content.form autofocus=false bunsenModel=userModel inline=true value=formValue showAllErrors=showAllErrors }} {{/block-slot}} {{#block-slot slot 'footer' as |controls close|}} {{controls.confirm onConfirm=(action 'save') text='Submit' }} {{/block-slot}}{{/frost-modal-input}}Default title component template
{{#frost-modal-input title='Test title' subtitle='Subtitle'}} // Custom modal content{{/frost-modal-input}}Custom title component template
{{#frost-modal-input titleComponent='myTitleComponent'}} // Custom modal content{{/frost-modal-input}}Background effects
ember-remodal provides you with a remodal-bg class that you can apply to your application content, to apply blur effects to the modal overlay.
<div class="dummy-content remodal-bg"> {{outlet}}</div>ember-perfectscroll effects
This gives you styling of header/footer when content is scrolled underneath either element
Styling includes: box shadow plus slight transparency in header/footer to reveal content underneath For more documentation on ember-perfectscroll: perfect-scrollbar
Development
Setup
git clone git@github.com:ciena-frost/ember-frost-modal-input.git
cd ember-frost-modal-input
npm install && bower install
Development Server
A dummy application for development is available under ember-frost-modal-input/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.