wizard add tabs

Author: Di Wang

src/app/dashboard/component/wizard/wizard.component.html

@@ -16,7 +16,15 @@ <h5 class="text-center" style="margin-top: 5px">This information will let us kno
           <div class="move-tab text-center text-uppercase">About</div>
         </div>
         <div class="wizard-body">
-          dsds
+          <div class="wizard-tab">
+            tab 1
+          </div>
+          <div class="wizard-tab">
+            tab 2
+          </div>
+          <div class="wizard-tab">
+            tab 3
+          </div>
         </div>
         <div class="wizard-footer">
           <button id="preBtn" class="btn btn-danger" (click)="preOnClick()">Previous</button>

src/app/dashboard/component/wizard/wizard.component.ts

@@ -22,7 +22,6 @@ export class WizardComponent implements OnInit, AfterViewInit {
       if (screenWidth > 990) {
         if (this.tabIndex === 1) {
           moveTab.style.left = '20vw';
-          console.log('111');
         } else if (this.tabIndex === 2) {
           moveTab.style.left = '41vw';
         }
@@ -34,13 +33,21 @@ export class WizardComponent implements OnInit, AfterViewInit {
         }
       }
     });
+    const tabs = document.getElementsByClassName('wizard-tab');
+    for (let i = 1; i < tabs.length; i++) {
+      (<HTMLElement>tabs[i]).style.display = 'none';
+    }
   }
 
   preOnClick() {
     const moveTab = <HTMLElement>document.querySelector('.move-tab');
     const nextBtn = <HTMLElement>document.getElementById('nextBtn');
     const preBtn = <HTMLElement>document.getElementById('preBtn');
+    const tabs = document.getElementsByClassName('wizard-tab');
     const screenWidth = document.body.clientWidth;
+    for (let i = 0; i < tabs.length; i++) {
+      (<HTMLElement>tabs[i]).style.display = 'none';
+    }
     if (this.tabIndex === 2) {
       this.tabIndex--;
       moveTab.style.left = screenWidth > 990 ? '20vw' : '30vw';
@@ -52,13 +59,18 @@ export class WizardComponent implements OnInit, AfterViewInit {
       preBtn.style.visibility = 'hidden';
       moveTab.innerHTML = 'About';
     }
+    (<HTMLElement>tabs[this.tabIndex]).style.display = 'inherit';
   }
 
   nextOnClick() {
     const moveTab = <HTMLElement>document.querySelector('.move-tab');
     const nextBtn = <HTMLElement>document.getElementById('nextBtn');
     const preBtn = <HTMLElement>document.getElementById('preBtn');
+    const tabs = document.getElementsByClassName('wizard-tab');
     const screenWidth = document.body.clientWidth;
+    for (let i = 0; i < tabs.length; i++) {
+      (<HTMLElement>tabs[i]).style.display = 'none';
+    }
     if (this.tabIndex === 0) {
       this.tabIndex++;
       moveTab.style.left = screenWidth > 990 ? '20vw' : '30vw';
@@ -70,6 +82,7 @@ export class WizardComponent implements OnInit, AfterViewInit {
       nextBtn.style.visibility = 'hidden';
       moveTab.innerHTML = 'Address';
     }
+    (<HTMLElement>tabs[this.tabIndex]).style.display = 'inherit';
   }
 
 }