ember-cli-wizard v0.1.9

ember-cli-wizard

Ember wizard component inspired by jquery-steps.

Demo: https://ritesh83.github.io/ember-cli-wizard/#/basic-example

Installation

ember install ember-cli-wizard

This addon uses the 'hash' helper and hence requires ember 2.3 or above. If you would like to use it with older versions of ember, install the hash helper polyfill.

Usage

{{#ember-cli-wizard
    wizardData=wizardData
    submitAction='submitAction'
    cancelAction='cancelAction'
    as |currentState|
}}
    {{#currentState.step stepId="1" wizardCurrentState=currentState}}
        <p>Step 1</p>
    {{/currentState.step}}

    {{#currentState.step stepId="2" wizardCurrentState=currentState}}
        <p>Step 2</p>
    {{/currentState.step}}

    {{#currentState.step stepId="3" wizardCurrentState=currentState}}
        <p>Step 3</p>
    {{/currentState.step}}
{{/ember-cli-wizard}}

To use this addon with ember version < 2.3, use the 'wizard-step' component instead of 'currentState.step' (reason: ember versions below 2.3 do not support contextual components)

{{#ember-cli-wizard
    wizardData=wizardData
    submitAction='submitAction'
    cancelAction='cancelAction'
    as |currentState|
}}
    {{#wizard-step stepId="1" wizardCurrentState=currentState}}
        <p>Step 1</p>
    {{/wizard-step}}

    {{#wizard-step stepId="2" wizardCurrentState=currentState}}
        <p>Step 2</p>
    {{/wizard-step}}

    {{#wizard-step stepId="3" wizardCurrentState=currentState}}
        <p>Step 3</p>
    {{/wizard-step}}
{{/ember-cli-wizard}}

wizardData: [
    {'step_id': '1', 'header_label': '1. First Step'},
    {'step_id': '2', 'header_label': '2. Second Step'},
    {'step_id': '3', 'header_label': '3. Third Step'}
]

Import the wizard.css file in your app.

@import "ember-cli-wizard/wizard";

The 'step_id' is the unique identifier of each wizard step. The 'stepId' attribute value of each step needs to match the 'step_id' value in the 'wizardData'.

Bootstrap

This addon has a dependency on ember-bootstrap.

Note: The newer version (0.1.7) of this addon no longer brings in ember-bootstrap as a dependency on ember install. You need to install it separately. (Reason: A lot of projects already have bootstrap installed and hence run into build time merge errors.)

Follow the instructions here in order to include or exclude fonts and styles in your app: http://www.ember-bootstrap.com/#/getting-started

Options

CSS

Use the following classes to override animation styles:

.panel-wrapper {
    &.animating {
        .exit, .enter {
            -webkit-transition: all .7s ease-in-out;
            -ms-transition: all .7s ease-in-out;
            transition: all .7s ease-in-out;
        }
    }
}

To add the bootstrap 'well' class to the main component, set 'showWell' to true.

{{#ember-cli-wizard
    showWell=true
}}

To use rounded nav steps, set 'useRoundedNav' to true.

{{#ember-cli-wizard
    useRoundedNav=true
}}

By default the addon sets the steps class to the bootstrap 'col-xs-4'. To change the width or other styles of the step, set the 'headerStepsSizeClass' to a custom css class.

{{#ember-cli-wizard
    headerStepsSizeClass="custom-header-steps"
}}

Async

To perform an async operation after an individual step, use the 'hasAction' property in the wizardData config and pass in the 'wizardShowNextStep' and 'wizardStepChangeAction' values.

//js

wizardData: [
    {'step_id': '1', 'header_label': '1. First Step', 'hasAction': true},
    {'step_id': '2', 'header_label': '2. Second Step'},
    {'step_id': '3', 'header_label': '3. Third Step'}
]

wizardShowNextStep: true,

actions: {

    wizardStepChanged(wizardStep) {
        if (wizardStep['step_id'] === '1') {
            Ember.run.later(() => {
                this.set('wizardShowNextStep', true);                    
            }, 2000);
        }
    }

}

//hbs

{{#ember-cli-wizard
    wizardData=wizardData
    submitAction="submitAction"
    cancelAction="cancelAction"
    wizardShowNextStep=wizardShowNextStep
    wizardStepChangeAction="wizardStepChanged"
    animationDuration=700
    as |currentState|
}}

Buttons

To customize the button labels, set the 'buttonLabels' hash

{{#ember-cli-wizard
    buttonLabels=customButtonLabels
}}

customButtonLabels: {
    'nextLabel': 'Next',
    'finishLabel': 'Finish',
    'cancelLabel': 'Cancel',
    'prevLabel': 'Previous'
},

Demo

http://ritesh83.github.io/ember-cli-wizard/#/basic-example

All examples are in the dummy app.

• Clone this repo: git clone
• Install packages: npm install && bower install
• Run ember s
• Visit the sample app at http://localhost:4200.