Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hsuanxyz/ionic-stepper
Steppers components for Ionic / ionic2
https://github.com/hsuanxyz/ionic-stepper
components ionic stepper steppers-components
Last synced: 2 months ago
JSON representation
Steppers components for Ionic / ionic2
- Host: GitHub
- URL: https://github.com/hsuanxyz/ionic-stepper
- Owner: hsuanxyz
- License: mit
- Created: 2018-01-23T06:24:17.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T17:21:33.000Z (about 2 years ago)
- Last Synced: 2024-10-03T22:35:13.495Z (3 months ago)
- Topics: components, ionic, stepper, steppers-components
- Language: TypeScript
- Homepage: https://hsuanxyz.github.io/demo/ionic-stepper/
- Size: 1.69 MB
- Stars: 51
- Watchers: 7
- Forks: 39
- Open Issues: 39
-
Metadata Files:
- Readme: README-zh_CN.md
- License: LICENSE
Awesome Lists containing this project
README
# ionic-stepper
用于 Ionic 的分步器 (stepper)。
[![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]
## 开始
### 前提条件
- `ionic-angular: ^3.x`
- `@angular/animations: ^4.x`
### 安装
```base
$ npm install ionic-stepper
# or
$ yarn add ionic-stepper
```
### 使用
import 到你的 `root.module.ts`
```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`
```ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
template: `
Step1 Content
Step1 Content
Next
Step2 Content
Step2 Content
Previous
`
})
export class HomePage {
constructor(public navCtrl: NavController) { }
selectChange(e) {
console.log(e);
}
}
```
## API
### `ion-stepper`
#### property
| Name | Type | Default | Description |
| --------------- | ------------- | ------------- | ----------- |
| [mode] | `'horizontal', 'vertical'` | `'vertical'`| 方向 |
| (selectIndexChange) | `EventEmitter` | | index 改变事件 |
#### method
| Name | Description |
| --------------- | ----------- |
| nextStep(): void | 下一步 |
| previousStep(): void | 上一步 |
| setStep(index: number): boolean | 通过 index 设置 |
### `ion-step`
#### property
| Name | Type | Default | Description |
| --------------- | ------------- | ------------- | ----------- |
| [label] | `string` | | label |
| [description] | `string` | | 描述 (仅在 visible 有效) |
| [icon] | `icon` | `'number'` | step 的 icon, 默认显示当前 index ([icons](https://ionicframework.com/docs/ionicons/)) |
| [status] | `'error', ''` | `''` | step 的状态 |
| [errorIcon] | `string` | `'close'` | 错误状态下的 icon |
### `[ionicStepperNext]`
移动到下一步
`Next`
### `[ionicStepperPrevious]`
移动到上一步
`Previous`
## License
This project is licensed under the MIT License - see the [LICENSE](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