Skip to content

dmitryou/ionic-steps-bar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

IONIC STEPS BAR

A steps bar component for Ionic.

Steps to start:

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>

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.

About

A steps bar component for Ionic.

Resources

Stars

Watchers

Forks

Packages

No packages published