ionic-steps-bar
v1.0.0
Published
Step bar directive.
Downloads
4
Readme
IONIC STEPS BAR
A steps bar component for Ionic.
Steps to start:
0.Install via bower:
bower install
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>
Default options:
options = {
numOfSteps: 2,
numsColor: 'white',
componentBack: 'transparent',
barHeigth: '20pt',
componentMargin: '1% 0', //not configurable
highColor: '#8AA39B',
highPadding: '0 0.5%', //not configurable
backColor: '#95D9C3'
}
Configurable options:
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.