Nautical Poseidon Mythology
    Wondering what’s next for npm?Check out our public roadmap! »

    ember-frost-modal-input

    6.0.1 • Public • Published

    Travis Coveralls 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.

    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.

    Install

    npm i ember-frost-modal-input

    DownloadsWeekly Downloads

    64

    Version

    6.0.1

    License

    MIT

    Last publish

    Collaborators

    • avatar