add feature of sumSize parameter which is used for dividing the tab average width

README.md

@@ -16,8 +16,24 @@ $ npm install --save ng2-wizard
 
 Component Wizard(step to step with tabs) for Angular 2.
 ```
- <wizard orientation="string [landscape|portrait]" hiddenTabs="string [yes|no]" disableTabs="string [yes|no]" disableSteps="Array [number]" hiddenDisableSteps="string [yes|no]" currentStep="int [number]" (stepChange)="onYourFunction($event)">
+ <wizard orientation="string [landscape|portrait]" hiddenTabs="string [yes|no]" disableTabs="string [yes|no]" disableSteps="Array [number]" hiddenDisableSteps="string [yes|no]" currentStep="int [number]" (stepChange)="onYourFunction($event) sumStep="int [number]">
 ```
+## Parameters
+
+### sumStep
+
+This parameter is used for dividing the tab into average width of parent view for few tabs.
+
+If this parameter is set, the width of the label of tab will be determined by this parameter.
+
+For example:
+
+sumStep=3
+the label width will be 33.333%
+
+sumStep=4
+the label width will be 25%
+
 
 ## Example
 ### Template (.html)

src/wizard.component.html

@@ -1,6 +1,6 @@
 <div class='wizard' [class.wizard-portrait]="(defaults.orientation == 'portrait')">
 	<nav *ngIf="!defaults.hiddenTabs">
-		 <label *ngFor="let ws of wizardSteps; let i = index" [ngClass]="{enable: !defaults.disableTabs && !inArray(defaults.disableSteps, i), disabled: inArray(defaults.disableSteps, i), active: ws.isActive, hidden: (defaults.hiddenDisableSteps && inArray(defaults.disableSteps, i))}" (click)="setPanel(i, true)" [innerHTML]="ws.tabName"></label>
+		 <label *ngFor="let ws of wizardSteps; let i = index" [ngClass]="{enable: !defaults.disableTabs && !inArray(defaults.disableSteps, i), disabled: inArray(defaults.disableSteps, i), active: ws.isActive, hidden: (defaults.hiddenDisableSteps && inArray(defaults.disableSteps, i))}" (click)="setPanel(i, true)" [innerHTML]="ws.tabName" [style.width] = "tabWidthString"></label>
 	</nav>
 		<div class='wizard-content'>
 				<ng-content></ng-content>

src/wizard.component.ts

@@ -59,8 +59,12 @@ export class WizardComponent implements AfterContentInit {
         hiddenTabs: false,
         currentTab: 0,
         disableSteps: [-1],
-        hiddenDisableSteps: false
+        hiddenDisableSteps: false,
+        sumTabs: 0
     };
+
+    public tabWidth = 100;
+    public tabWidthString:string = "100%";
     @ContentChildren(WizardStepComponent) private wizardSteps: QueryList<WizardStepComponent>;
 
     /**
@@ -277,6 +281,29 @@ export class WizardComponent implements AfterContentInit {
     }
     get currentStep(): number { return this.defaults.currentTab; }
 
+
+    /**
+     * Set the sum of tab
+     *
+     * If this parameter is set, the length of the tab will be computed by this parameter
+     *
+     * For example:
+     * sum = 5
+     * the width of the tab will be 20%
+     *
+     * @param sum
+     */
+    @Input()
+    set sumStep(sum: number) {
+        this.defaults.sumTabs = this.getRealIndex(parseInt("" + sum));
+        this.tabWidth = this.tabWidth / sum;
+        this.tabWidthString =  this.tabWidth.toString() + "%";
+    }
+
+    get sumStep(): number {
+        return this.defaults.sumTabs;
+    }
+
     //Event Listeners
     /**
      * Return Object