Steps Directive [wsSteps]
Demo: https://wpdas.github.io/angular-ws-steps/
Install:
bower install angular-ws-steps --save
npm install angular-ws-steps --save
How to use:
The following files must be used:
< link rel = " stylesheet " href = " bower_components/angular-ws-steps/src/steps.css " >
< script src = " bower_components/angular-ws-steps/src/steps.directive.js " > < / script >
< link rel = " stylesheet " href = " node_modules/angular-ws-steps/src/steps.css " >
< script src = " node_modules/angular-ws-steps/src/steps.directive.js " > < / script >
The component can be used in the same document as many times as long as the id of the steps is different. Otherwise a warning will be issued on the console.
If the requested step is larger than the enabled step, it will not be displayed.
When the enabled step is changed, if the current step is larger than it, the first step will be automatically selected.
Note: title, ref and across parameter from step directive are optional.
< steps step = " 3 " enabled-step = " 3 " id = " idName " >
< step icon = " icon_name " title = " title " ref = " idRef1 " > < / step >
< step icon = " icon_name " title = " title " ref = " idRef2 " > < / step >
< step icon = " icon_name " title = " title " ref = " idRef3 " > < / step >
</ steps >
< step-content id = " idRef1 " > HTML content </ step-content >
< step-content id = " idRef2 " > HTML content </ step-content >
< step-content id = " idRef3 " > HTML content </ step-content >
You can use optional parameter "colors" to set colors of steps in sequence: enabled-color,
disabled-color and enabled-icon-color. Caution, in this mode, you only can use HEX colors type.
If you want to use rgb, rgba or similar, use StepAPI.init() instance.
< steps step = " 3 " enabled-step = " 3 " id = " idName " colors = " #ff0000, #765fff, #0000ff " >
...
</ steps >
Instance / Control
The object can be controlled using the AngularJS bind or using an instance of the StepsAPI object as in the example below:
angular . module ( ' app ' , [ ' wsSteps ' ] )
. controller ( ' AppCtrl ' , function ( StepsAPI ) {
var myNav = new StepsAPI . init ( ' idName ' ) ;
} ) ;
Default colors:
enabled-color (css #1976D2;
), disabled-color(css rgba(0,0,0,.38)
), enabled-icon-color(css rgba(25, 118, 210, 0.70)
).
To change default colors inject and use StepColors object like this:
angular . module ( ' app ' , [ ' wsSteps ' ] )
. controller ( ' AppCtrl ' , function ( StepsAPI , StepColors ) {
var stepColors = new StepColors ( ' #ff0000 ' , ' rgba(180, 76, 93, 0.70) ' , ' #0000ff ' ) ;
var myNav = new StepsAPI . init ( ' idName ' , stepColors ) ;
} ) ;
You can made too:
angular . module ( ' app ' , [ ' wsSteps ' ] )
. controller ( ' AppCtrl ' , function ( StepsAPI ) {
var myNav = new StepsAPI . init ( ' idName ' ) ;
myNav . onReady ( function ( ) {
myNav . setEnabledColor ( ' #ff0000 ' ) ;
myNav . setDisabledColor ( ' rgba(180, 76, 93, 0.70) ' ) ;
myNav . setEnabledIconColor ( ' #0000ff ' ) ;
} ) ;
} ) ;
You can pass an Object to the Step using "across" parameter and later, rescues it using myNav.getStepAcrossObject(myNav.getStep());
Something like:
< steps step = " 2 " enabled-step = " 2 " id = " idName " >
< step icon = " icon_name " title = " title " ref = " idRef1 " across = " vm.myFunction " > < / step >
< step icon = " icon_name " title = " title " ref = " idRef2 " across = " vm.myObject " > < / step >
</ steps >
< script >
angular . module ( ' app ' , [ ' wsSteps ' ] )
. controller ( ' AppCtrl as vm ' , function ( StepsAPI ) {
var vm = this ;
vm . myFunction = function ( ) { ... } ;
vm . myObject = { name : ' User Name ' } ;
var myNav = new StepsAPI . init ( ' idName ' ) ;
myNav . onStepChange ( function ( ) {
console . log ( myNav . getStepAcrossObject ( myNav . getStep ( ) ) ) ;
} ;
} ) ;
< / script >
To use the simple bind of AngularJS simply set the same in the desired parameter:
< div ng-controller = " AppCtrl as vm " >
< steps step = " {{vm.currentStep}} " enabled-step = " {{vm.currentEnabledStep}} " id = " idName " >
...
</ steps >
</ div >
To control the component using StepsAPI just create an instance of it by passing the id of the html element as parameter:
. controller ( ' AppCtrl ' , function ( StepsAPI ) {
var myNav = new StepsAPI . init ( ' idName ' ) ;
myNav . onReady ( function ( ) {
myNav . getElement ( ) ;
myNav . getElementId ( ) ;
myNav . getTotalSteps ( ) ;
myNav . getStep ( ) ;
myNav . setStep ( 1 ) ;
myNav . getEnabledStep ( ) ;
myNav . setEnabledStep ( 4 ) ;
myNav . setEnabledColor ( ' #ff0000 ' ) ;
myNav . setDisabledColor ( ' rgba(180, 76, 93, 0.70) ' ) ;
myNav . setEnabledIconColor ( ' #0000ff ' ) ;
myNav . getStepAttributes ( myNav . getStep ( ) ) ;
myNav . getStepAttributes ( myNav . getStep ( ) ) . myParameter ;
myNav . getStepAcrossObject ( myNav . getStep ( ) ) ;
myNav . update ( )
} ) ;
myNav . onStepChange ( function ( ) {
console . log ( ' Step Changes ' ) ;
} ) ;
myNav . onEnabledStepChange ( function ( ) {
console . log ( ' Enabled Step Changes ' ) ;
} ) ;
myNav . onStepChangeNotAllowed ( function ( err ) {
console . error ( err ) ;
} ) ;
myNav . onDestroy ( function ( ) {
console . log ( ' myNav was destroyed ' ) ;
myNav = null ;
} )
} ) ;
Dependencies:
This component depends on the Angular Material and its assets (icons) that must be loaded in a sequence similar to this:
< link rel = " stylesheet " href = " https://fonts.googleapis.com/css?family=Roboto " >
< link rel = " stylesheet " href = " https://fonts.googleapis.com/css?family=Open+Sans " >
< link rel = " stylesheet " href = " https://fonts.googleapis.com/icon?family=Material+Icons " >
< link rel = " stylesheet " href = " /bower_components/angular-material/angular-material.css " >
< script src = " /bower_components/angular/angular.min.js " > < / script >
< script src = " /bower_components/angular-aria/angular-aria.js " > < / script >
< script src = " /bower_components/angular-animate/angular-animate.js " > < / script >
< script src = " /bower_components/angular-material/angular-material.js " > < / script >
Change Logs
Version 1.1.1 - 2017-10-24
New API access method: getStepAcrossObject(step);
Version 1.1.0 - 2017-10-19
New API access method: getStepAttributes(step);
New Event: onDestroy(callback);
Remove events automatically when the Step controller is destroyed.
See examples from API use in the above lines.
License
License MIT.