تنزيل ionic stepper - تنزيل رمز المصدر ionic stepper

ionic stepper

مكونات الطرف الثالث

release: 1.1.0

تنزيل

أيوني-سكبر

مكونات السائر للأيوني.

中文 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 (): باطلة	الخطوة التالية
PrevictStep (): باطلة	الخطوة السابقة
setStep (الفهرس: رقم): منطقية	تعيين خطوة على الفهرس

`ion-step`

ملكية

اسم	يكتب	تقصير	وصف
[ملصق]	`string`		تسمية الخطوة
[وصف]	`string`		وصف الخطوة (الوضع الرأسي فقط مرئي)
[رمز]	`icon`	`'number'`	أيقونة الخطوة ، عرض الافتراضي الفهرس (الرموز)
[حالة]	`'error', ''`	`''`	حالة الخطوة
[erroricon]	`string`	`'close'`	أيقونة حالة الخطأ