Split your UI into (wizard-like) steps in AngularJS.
MIT License
Wrap your Angular UI logic into a series of steps (pages/slides).
Demo: http://codepen.io/omichelsen/pen/zkCun
$ bower install angular-steps --save
Include the style sheet and library in your web page:
<link href="bower_components/angular-steps/dist/angular-steps.css" rel="stylesheet">
<script src="bower_components/angular-steps/dist/angular-steps.js"></script>
angular-steps has no other dependencies than Angular itself, and ngAnimate if you want animated transition effects.
Require angular-steps as a dependency for your app:
angular.module('MyApp', ['angular-steps']);
Start creating some steps around your UI:
<steps>
<step>
<h1>Step 1</h1>
<button step-next>Next</button>
</step>
<step>
<h1>Step 2</h1>
<button step-previous>Previous</button>
</step>
</steps>
The main <steps>
directive has the following (optional) attributes:
<steps>
toServiceHandler
.You can step navigate back and forward between the steps using these built-in attributes:
on-finish
callback. Clicking step-next
onAll attributes can receive an optional function to be called before changing the step:
<button step-next="doStuff()">Next</button>
In this case, doStuff()
will be called before going to the next step.
If you want to access and manipulate the steps from the controller, you can inject the StepsHandler.
This example validates that the input name is "Marvin" and proceeds to the next step:
<steps>
<step>
<input type="text" ng-model="name">
<button ng-click="validateAndSubmit">Save my name</button>
</step>
</steps>
myapp.controller('MyCtrl', ['StepsService', function (stepsService) {
$scope.validateAndSubmit = function () {
if ($scope.name === 'Marvin') {
stepsService.steps().next();
}
};
}]);
You can use the following functions on StepsService.steps()
:
on-finish
callback.You can get the number of steps from StepsService.steps().steps.length
.
If you have multiple <steps>
in your page and wish to access them from the
StepsService
, be sure to specify a unique name on each like so:
<steps name="myLoginFlow"> ... </steps>
<steps name="mySecondFlow"> ... </steps>
Access them by name to avoid conflicts:
StepsService.steps('myLoginFlow').next();
StepsService.steps('mySecondFlow').next();
By default the steps are overlayed on top of each other using
position: absolute
and z-index
.
If you want to style each step individually, you can apply a CSS class to it as you would any element:
<step class="step-yellow">
...
</step>
.step-yellow {
background: yellow;
}
The default styles for angular-steps are supplied in both CSS, SCSS and LESS format, whichever your prefer.
You can animate the transition between the steps using ngAnimate. The following styles will add a fade in/out animation between the steps:
.angular-steps .step.ng-hide-add,
.angular-steps .step.ng-hide-remove {
transition: all 0.6s ease-in-out;
opacity: 1;
}
.angular-steps .step.ng-hide {
opacity: 0;
}
This project was inspired by angular-wizard by @mgonto. angular-steps is intended to be simpler, with a subset of features, smaller footprint and fewer dependencies.