ionic-wizard

A set of Angular directives to create a startup wizard component using Ionic's slide box

Sample Projects

There are two sample Ionic projects included. They may be run locally with ionic serve

example

A simple wizard as shown in the demo above, run each time the app is launched.

example-storage

A first time wizard with localStorage integration, runs only once and saves some settings in the localStorage.

Getting Started

bower install ionic-wizard

Add JS file

<script src="dist/ion-wizard.js"></script>

Add dependencies

angular.module('myApp', ['ionic', 'ionic.wizard'])

Create your wizard template and add wizard directives

ion-wizard-previous

Add this directive to any link or button to add back behavior. Back button will be hidden on the first step of the wizard.

<button class="button button-light" ion-wizard-previous>Back</button>

ion-wizard-next

Add this directive to any link or button to add next behavior. Next button will be hidden on the last step of the wizard.

<button class="button button-light" ion-wizard-next>Next</button>

ion-wizard-start

Use this directive to attach a callback to the start button to launch the app. The button will be shown only in the last step of the wizard.

Add a condition attribute to define a condition for the last step prior to launching the app.

<button class="button button-light" ion-wizard-start="start()">Start App</button>

ion-wizard

Main wizard directive must be added to Ionic's ion-slide-box directive

<ion-slides ion-wizard>
    ...
</ion-slides>

ion-wizard-step

Apply this directive to an ion-slide to define each step of the wizard. If needed, a next-condition can be defined which will be evaluated before allowing the user to move forward. An event is generated if the condition fails that can be used to inform the user or perform any other action from the controller. Apply the has-header class to add some top padding in case there is a navigation bar.

<ion-slide-page ion-wizard-step next-condition="user.LastName != undefined" class="has-header">
    ...
</ion-slide-page>

Then in your app controller:

angular.module('myApp.controllers')
    .controller('IntroCtrl', ['$scope', '$ionicPopup', function($scope, $ionicPopup) {
        $scope.$on('wizard:StepFailed', function(e, args) {
            if (args.index == 1 && args.direction == "next") {
                $ionicPopup.alert({
                    title: 'Empty field',
                    template: 'Please enter a value!'
                }).then(function (res) {
                    console.log('Field is empty');
                });
            }
        });
    }]);

A prev-condition attribute can be defined for conditionally allowing a user to move backward in the wizard. It operates the same way as the next-condition

ion-content

To make the content scrollable within a particular slide wrap the content in a ion-content directive. If there is a navigation bar apply the has-header class to this directive instead of the outer ion-slide.

<ion-slide-box ion-wizard>
        <ion-slide ion-wizard-step>
            <ion-content class="has-header">
                <div class="row">
                   ...
                </div>
            </ion-content>
        </ion-slide>
</ion-slide-box>