Ember-frost-modal-input NPM

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.