add wizard move tab

Author: Di Wang

src/app/dashboard/component/wizard/wizard.component.css

@@ -0,0 +1,55 @@
+.wizard-panel{
+
+}
+
+.wizard-header{
+ padding: 25px 0 35px;
+}
+
+.wizard-navigation{
+ position: relative;
+}
+
+.nav-pills{
+ background-color: rgba(200, 200, 200, 0.2);
+ width: 100%;
+}
+
+.nav-pills li{
+ width: 33.3333%;
+ float: left;
+ margin-left: 0;
+ font-size: 12px;
+ font-weight: 500;
+ min-width: 100px;
+ color: #555;
+ padding: 10px 0;
+}
+
+.move-tab{
+ position: absolute;
+ background-color: #f44336;
+ box-shadow: 0 16px 26px -10px rgba(244, 67, 54, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(244, 67, 54, 0.2);
+ font-weight: 500;
+ border-radius: 4px;
+ color: #fff;
+ top: -2px;
+ left: -1vw;
+ width: 35%;
+ height: 114%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ transition: all 500ms cubic-bezier(0.29, 1.42, 0.79, 1);
+}
+
+.wizard-body{
+ min-height: 350px;
+ padding: 15px;
+}
+
+.wizard-footer{
+ display: flex;
+ padding: 10px;
+ justify-content: space-between;
+}

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

@@ -1,6 +1,28 @@
 <div class="container">
  <app-navbar title="Wizard"></app-navbar>
  <div class="row page-title">
-
+ <div class="col-md-10 col-md-offset-1">
+ <div class="wizard-panel card">
+ <div class="wizard-header">
+ <h3 class="text-center">Build Your Profile</h3>
+ <h5 class="text-center" style="margin-top: 5px">This information will let us know more about you.</h5>
+ </div>
+ <div class="wizard-navigation">
+ <ul class="nav nav-pills">
+ <li class="text-uppercase text-center">About</li>
+ <li class="text-uppercase text-center">Account</li>
+ <li class="text-uppercase text-center">Address</li>
+ </ul>
+ <div class="move-tab text-center text-uppercase">About</div>
+ </div>
+ <div class="wizard-body">
+ dsds
+ </div>
+ <div class="wizard-footer">
+ <button id="preBtn" class="btn btn-danger" (click)="preOnClick()">Previous</button>
+ <button id="nextBtn" class="btn btn-success" (click)="nextOnClick()">Next</button>
+ </div>
+ </div>
+ </div>
  </div>
 </div>

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

@@ -6,10 +6,46 @@ import { Component, OnInit } from '@angular/core';
  styleUrls: ['./wizard.component.css']
 })
 export class WizardComponent implements OnInit {
-
+ tabIndex = 0;
  constructor() { }
 
  ngOnInit() {
+ const preBtn = <HTMLElement>document.getElementById('preBtn');
+ preBtn.style.visibility = 'hidden';
+ }
+
+ preOnClick() {
+ const moveTab = <HTMLElement>document.querySelector('.move-tab');
+ const nextBtn = <HTMLElement>document.getElementById('nextBtn');
+ const preBtn = <HTMLElement>document.getElementById('preBtn');
+ if (this.tabIndex === 2) {
+ this.tabIndex--;
+ moveTab.style.left = '20vw';
+ nextBtn.style.visibility = 'visible';
+ moveTab.innerHTML = 'Account';
+ }else if (this.tabIndex === 1) {
+ this.tabIndex--;
+ moveTab.style.left = '-1vw';
+ preBtn.style.visibility = 'hidden';
+ moveTab.innerHTML = 'About';
+ }
+ }
+
+ nextOnClick() {
+ const moveTab = <HTMLElement>document.querySelector('.move-tab');
+ const nextBtn = <HTMLElement>document.getElementById('nextBtn');
+ const preBtn = <HTMLElement>document.getElementById('preBtn');
+ if (this.tabIndex === 0) {
+ this.tabIndex++;
+ moveTab.style.left = '20vw';
+ preBtn.style.visibility = 'visible';
+ moveTab.innerHTML = 'Account';
+ }else if (this.tabIndex === 1) {
+ this.tabIndex++;
+ moveTab.style.left = '41vw';
+ nextBtn.style.visibility = 'hidden';
+ moveTab.innerHTML = 'Address';
+ }
  }
 
 }