ionic stepper

stage ionique

Composants de steppers pour ionic.

中文 Readme

Commencer

Condition préalable

• ionic-angular: ^3.x
• @angular/animations: ^4.x

Installation

 $ npm install ionic-stepper
# or
$ yarn add ionic-stepper

Usage

importer dans your-root.module.ts

 import { BrowserModule } from '@angular/platform-browser' ;
import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ;
import { ErrorHandler , NgModule } from '@angular/core' ;
import { IonicApp , IonicErrorHandler , IonicModule } from 'ionic-angular' ;

...

import { IonicStepperModule } from 'ionic-stepper' ;

@ NgModule ( {
  ...
  imports : [
    BrowserModule ,
    BrowserAnimationsModule ,
    IonicStepperModule ,
    IonicModule . forRoot ( MyApp )
  ] ,
  ...
} )
export class AppModule { }

your-component.ts

 import { Component } from '@angular/core' ;
import { NavController } from 'ionic-angular' ;

@ Component ( {
  selector : 'page-home' ,
  template : `
   <ion-stepper #stepper (selectIndexChange)="selectChange($event)">
      <ion-step label="Step1"
                description="Step1 description">
        <h2>Step1 Content</h2>
        <p>Step1 Content</p>
        <button ion-button small ionicStepperNext>Next</button>
      </ion-step>
      <ion-step label="Step2 - Step2 - Step2"
                description="Step1 description">
        <h2>Step2 Content</h2>
        <p>Step2 Content</p>
        <button ion-button color="light" small ionicStepperPrevious>Previous</button>
      </ion-step>
    </ion-stepper>
  `
} )
export class HomePage {

  constructor ( public navCtrl : NavController ) { }

  selectChange ( e ) {
    console . log ( e ) ;
  }
} 

API

ion-stepper

propriété

Nom	Taper	Défaut	Description
[mode]	'horizontal', 'vertical'	'vertical'	orientation
(selectIndexchange)	EventEmitter<number>		Événement de changement d'index

méthode

Nom	Description
NextStep (): vide	prochaine étape
PREMERSTEP (): VOID	étape précédente
setstep (index: numéro): booléen	Définir l'étape par index

ion-step

propriété

Nom	Taper	Défaut	Description
[étiquette]	string		étiquette de pas
[description]	string		Description de l'étape (seul le mode vertical est visible)
[icône]	icon	'number'	Icône étape, par défaut Afficher l'index (icônes)
[statut]	'error', ''	''	État de l'étape
[errorIcon]	string	'close'	Icône d'état d'erreur

[ionicStepperNext]

passe à l'étape suivante dans le stepper

<button ion-button ionicStepperNext>Next</button>

[ionicStepperPrevious]

se déplace vers l'étape précédente dans le stepper

<button ion-button ionicStepperPrevious>Previous</button>

Licence

Ce projet est autorisé en vertu de la licence MIT - voir le fichier de licence pour plus de détails