diff --git a/README.md b/README.md index 71c58e1..3074da9 100644 --- a/README.md +++ b/README.md @@ -16,8 +16,24 @@ $ npm install --save ng2-wizard Component Wizard(step to step with tabs) for Angular 2. ``` - + ``` +## 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) diff --git a/src/wizard.component.html b/src/wizard.component.html index b2c0e00..4b41bd6 100644 --- a/src/wizard.component.html +++ b/src/wizard.component.html @@ -1,6 +1,6 @@
diff --git a/src/wizard.component.ts b/src/wizard.component.ts index 2d707e9..ed04022 100644 --- a/src/wizard.component.ts +++ b/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; /** @@ -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