@eflexsystems/ember-cli-wizard v1.0.1

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

<EmberCliWizard
    wizardData={{this.wizardData}}
    submitAction={{action 'submitAction'}}
    cancelAction={{action '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>
</EmberCliWizard>

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 requires bootstrap

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;
        }
    }
}

By default the addon adds the bootstrap 'well' class to the main component. To remove the class set 'showWell' to false.

<EmberCliWizard @showWell={{false}} />

To override the default styles of the wizard steps, use the following classes:

.panel-wrapper {
    height: 450px;
    background-color: #ececec;
}

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

<EmberCliWizard
    @wizardData={{this.wizardData}}
    @submitAction={{action "submitAction"}}
    @cancelAction={{action "cancelAction"}}
    @wizardShowNextStep={{this.wizardShowNextStep}}
    @wizardStepChangeAction={{action "wizardStepChanged"}}
    @animationDuration={{700}}
    as |currentState|
/>

Buttons

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

<EmberCliWizard @buttonLabels=this.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.