Skip to content

Latest commit

 

History

History
156 lines (133 loc) · 4.72 KB

README.md

File metadata and controls

156 lines (133 loc) · 4.72 KB
Raw

Ionic 3.3.0 Simple Conditional Wizard

Simple component to handle conditionals steps wizard in ionic 3.

Getting Started

  • Clone this repository.
  • Run npm install from the project root.
  • Install the ionic CLI (npm install -g ionic)
  • Run ionic serve in a terminal from the project root.

Using this component in your projects

  • Copy and paste ion-simple-wizard component files from pages folder.
  • Import it and declare the 'IonSimpleWizard' and 'IonSimpleWizardStep' component and 'BrowserAnimationsModule' module in the app.module.ts file:
...
import {IonSimpleWizard} from '../pages/ion-simple-wizard/ion-simple-wizard.component';
import {IonSimpleWizardStep} from '../pages/ion-simple-wizard/ion-simple-wizard.step.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    IonSimpleWizard,
    IonSimpleWizardStep
  ],
  imports: [
    BrowserAnimationsModule
  ]
  ...
  • Now you can use the wizard like this:
<ion-simple-wizard [(step)]="step" [showSteps]="true" (finish)="onFinish()" [finishIcon]="'done-all'" [(stepCondition)]="stepCondition">
    <ion-wizard-step>
      Step 1 content
    </ion-wizard-step>
    <ion-wizard-step>
      Step 2 content
    </ion-wizard-step>
    ...
    <ion-wizard-step>
      Step N content
    </ion-wizard-step>
</ion-simple-wizard>

Wizard Options

  • [(step)] : step counter of the wizard, set it to 1 by default
  • [showSteps] : true if you want to show the steps counter in the wizard
  • (finish): The event will be fire when the wizard is finish
  • [finishIcon]: ion-icon name for the last step, see the names here: Ionicons
  • [(stepCondition)]: Condition of the next step of the wizard, you can change it in every step.
  • Example of initial settings:
    this.step = 1;//The value of the first step, always 1
    this.stepCondition = false;//Set to true if you don't need condition in every step
    this.stepDefaultCondition = this.stepCondition;//Save the default condition for every step

Animations

  • Checkout the ion-simple-wizard-animations.ts file to see the availables step and buttons animations.
  • To change the wizard navigation buttons animations go to the file 'ion-simple-wizard.component.ts' and modify the value in the @Component:
@Component({
  selector: 'ion-simple-wizard',
  templateUrl: 'ion-simple-wizard.component.html',
  animations: WizardAnimations.btnRotate//Change 'btnRotate' for any other animation with the prefix btn
})
  • To change the step animation go to the file 'ion-simple-wizard.step.component.ts' and modify the value in the @Component:
@Component({
    selector: 'ion-wizard-step',
    host: {
        '[@WizardAnimations]': 'isCurrent ?"enter":"leave"'
    },
    template: `
    <ng-content></ng-content>
  `,
    animations: WizardAnimations.zoom//Change 'zoom' for any other animation
})

Events

You can subcribe to the following ionic 2 Events:

  • 'step:changed'
//You can subscribe to the Event 'step:changed' to handle the current step
    this.events.subscribe('step:changed', step => {
      //Handle the current step if you need
      this.currentStep = step[0];
    });
  • 'step:next'
this.events.subscribe('step:next', () => {
      //Do something if next
      console.log('Next pressed: ',this.currentStep);
    });
  • 'step:back'
 this.events.subscribe('step:back', () => {
      //Do something if back
      console.log('Back pressed: ',this.currentStep);
    });

Ionic Info

global packages:

    @ionic/cli-utils : 1.3.0
    Cordova CLI      : 6.5.0 
    Ionic CLI        : 3.3.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.3.0
    @ionic/cli-plugin-ionic-angular : 1.3.0
    Cordova Platforms               : none
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v7.5.0
    OS         : Linux 4.4
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

Platforms

  • Android (Tested in 6.0)
  • iOS (Tested in 10.2)

Preview

TO DO

  • Test in other platforms.
  • Improve the animations or steps transitions.
  • Improve the wizard hide when the keyboard is open.
  • Others improvements or new features are welcome :)

Credits