ionic-stepper

Steppers components for Ionic.

[![Build Status][build-image]][build-image]
[![Dependency Status][dependency-image]][dependency-url]
[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][downloads-url]
[![MIT License][license-image]][license-url]

中文 README

Getting Started

$3

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

$3

``base
$ npm install ionic-stepper


or


$ yarn add ionic-stepper
`

$3

import in your-root.module.ts

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

...

import { IonicStepperModule } from 'ionic-stepper';

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

your-component.ts

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

@Component({
selector: 'page-home',
template:

description="Step1 description">

Step1 Content

Step1 Content

Next

description="Step1 description">

Step2 Content

Step2 Content

Previous



})
export class HomePage {

constructor(public navCtrl: NavController) { }

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

`

API

$3

#### property

| Name | Type | Default | Description |
| --------------- | ------------- | ------------- | ----------- |
| [mode] | 'horizontal', 'vertical' | 'vertical'| orientation |
| (selectIndexChange) | EventEmitter | | index change event |

#### method

| Name | Description |
| --------------- | ----------- |
| nextStep(): void | next step |
| previousStep(): void | previous step |
| setStep(index: number): boolean | set step by index |




$3

#### property

| Name | Type | Default | Description |
| --------------- | ------------- | ------------- | ----------- |
| [label] | string | | step label |
| [description] | string | | step description (only vertical mode is visible) |
| [icon] | icon | 'number' | step icon, default display the index (icons) |
| [status] | 'error', '' | '' | step status |
| [errorIcon] | string | 'close' | error status icon |

$3

moves to the next step in the stepper

Next

$3

moves to the previous step in the stepper

Previous`

License

This project is licensed under the MIT License - see the LICENSE file for details

[build-image]: https://travis-ci.org/HsuanXyz/ionic-stepper.svg?branch=master
[build-image]: https://travis-ci.org/HsuanXyz/ionic-stepper

[dependency-image]: https://david-dm.org/HsuanXyz/ionic-stepper.svg
[dependency-url]:https://david-dm.org/HsuanXyz/ionic-stepper

[npm-image]: https://img.shields.io/npm/v/ionic-stepper.svg
[npm-url]: https://www.npmjs.com/package/ionic-stepper

[downloads-image]: https://img.shields.io/npm/dm/ionic-stepper.svg
[downloads-url]: http://badge.fury.io/js/ionic-stepper

[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license-url]: LICENSE