ionic stepper Download - ดาวน์โหลดซอร์สโค้ด ionic stepper

ionic stepper

ส่วนประกอบของบุคคลที่สาม

release: 1.1.0

ดาวน์โหลด

อิออนสเตปเปอร์

ส่วนประกอบของ Steppers สำหรับ Ionic

中文 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 (): เป็นโมฆะ	ขั้นตอนต่อไป
ก่อนหน้า (): เป็นโมฆะ	ขั้นตอนก่อนหน้า
setStep (ดัชนี: หมายเลข): บูลีน	กำหนดขั้นตอนตามดัชนี

`ion-step`

คุณสมบัติ

ชื่อ	พิมพ์	ค่าเริ่มต้น	คำอธิบาย
[ฉลาก]	`string`		ฉลากขั้นตอน
[คำอธิบาย]	`string`		คำอธิบายขั้นตอน (มองเห็นโหมดแนวตั้งเท่านั้น)
[ไอคอน]	`icon`	`'number'`	ไอคอนขั้นตอนการแสดงดัชนีเริ่มต้น (ไอคอน)
[สถานะ]	`'error', ''`	`''`	สถานะขั้นตอน
[erroricon]	`string`	`'close'`	ไอคอนสถานะข้อผิดพลาด