ionic stepper

이온-스텝퍼

이온을위한 대초원 구성 요소.

中文 readme

시작하기

전제 조건

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

설치

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

용법

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

재산

이름	유형	기본	설명
[방법]	'horizontal', 'vertical'	'vertical'	정위
(SelectIndexChange)	EventEmitter<number>		색인 변경 이벤트

방법

이름	설명
NextStep () : void	다음 단계
previousStep () : void	이전 단계
setstep (색인 : 번호) : 부울	인덱스별로 설정하십시오

ion-step

재산

이름	유형	기본	설명
[상표]	string		스텝 레이블
[설명]	string		단계 설명 (수직 모드 만 표시됩니다)
[상]	icon	'number'	스텝 아이콘, 기본값 표시 인덱스 (아이콘)
[상태]	'error', ''	''	단계 상태
[ERRERICON]	string	'close'	오류 상태 아이콘

[ionicStepperNext]

스테퍼의 다음 단계로 이동합니다

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

[ionicStepperPrevious]

스테퍼의 이전 단계로 이동합니다

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

특허

이 프로젝트는 MIT 라이센스에 따라 라이센스가 부여됩니다. 자세한 내용은 라이센스 파일을 참조하십시오.