0.Install via bower or npm:
bower install ionic-steps-bar
npm install ionic-steps-bar
1.Include ion-pullup.js in your HTML :
<script src="js/ionic-steps-bar.js"></script>
2.Add dependencies to your app :
angular.module('yourApp', ['ionic', 'ionic-steps-bar'])
3.Usage:
<ion-view view-title="Ionic Steps Bar">
<ion-content scroll="false">
<div ion-steps-bar set-step="1" options="{numOfSteps: 4,barHeigth: '20pt'}"></div>
</ion-content>
</ion-view>
options = {
numOfSteps: 2,
numsColor: 'white',
componentBack: 'transparent',
barHeigth: '20pt',
componentMargin: '1% 0', //not configurable
highColor: '#8AA39B',
highPadding: '0 0.5%', //not configurable
backColor: '#95D9C3'
}
numOfSteps - Number of steps to show in the bar.
numsColor - Color of numbers in the bar.
componentBack - Color of div container for ionic component (TRANSPARENT by DEFAULT).
barHeigth - Bar heigth (IF PROVIDED MUST BE IN PTs - 20pt,50pt,100pt etc. and 20pt is MINIMUM ).
highColor - Filling color(Color that fills steps when increased / decreased.).
backColor - Background color of steps bar.